首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 vue-router安装配置

vue3中vue-router安装配置使用全过程

2025-09-24 10:03:46 作者：keep_python

VueRouter是Vue.js官方的路由管理器,用于实现单页面应用(SPA)的路由功能,这篇文章主要介绍了vue3中vue-router安装配置使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

总结：

哪里有跳转，哪里有路由占位 <RouterView/>
js跳转：router对象 : const router = useRouter()
js收参：route对象 : const route = useRoute()
页面跳转：<router-link :to="{ name: 'home', params: { id: 123 } }">主页</router-link>
注意：尽量就使用路由名 name 跳转即可！
1. 传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
2. 传递query参数时，若使用to的对象写法，path可以使用name配置项，也可以使用path。

1. 路由器 router 安装

npm install vue-router

2、路由器 router 配置

2.1 在 router 文件夹下创建 index.ts 文件，配置路由

/**
 * 创建路由器并且暴露出去!
 * vue3中必须指定工作模式!
 *
 *  */
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home',
  },

  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/demo_route/home.vue'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/demo_route/about.vue'),
  },
  {
    path: '/news',
    name: 'news',
    component: () => import('@/views/demo_route/news.vue'),
  },
];
// 引入
const router = createRouter({
  // 路由器的工作模式
  history: createWebHistory(),
  routes,
});
// 暴露出去
export default router;

2.2 路由器 router 引入

在 main.ts 文件中引入路由：

import router from './router';
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.use(router);
app.mount('#app');

3、路由的简单测试

<!--
 * @author: keep_di
 * @desc: 
* 路由中有设计好的一个激活样式：active-class
-->
<script setup lang="ts">
  // RouterView
  import { RouterView, RouterLink } from 'vue-router';
</script>
<template>
  <div class="app">
    <h2 class="title">路由测试学习</h2>
    <hr />
    <ul class="nav">
      <RouterLink to="/home" active-class="nav_active">首页</RouterLink>
      <RouterLink to="/about" active-class="nav_active">关于</RouterLink>
      <RouterLink to="/news" active-class="nav_active">新闻</RouterLink>
    </ul>
    <hr />
    <router-view class="content"></router-view>
  </div>
</template>

如何使用路由和路由器

1、路由跳转和传参

1.1 组件标签router-link 中

to 的字符串写法

<!-- 第一种：to的字符串写法 -->
<router-link to="/home">主页</router-link>

to 的对象写法 ★

<!-- 第二种：to的name对象写法 -->
<router-link :to="{ name: 'home', params: { id: 123 } }">主页</router-link>

1.2 js中使用

前提：拿到路由器和路由对象：

跳转： router对象！
收参： route对象！

import { useRoute, useRouter } from 'vue-router';
//导入能返回路由器和路由对象的方法！
const route = useRoute();
const router = useRouter();

路由跳转：参数：params （类似post ）

router.push({ name: 'user', params: { user: '123', role: 'admin' } });

路由跳转：参数： query （类似get ）

router.push({ name: 'user', query: { user: '123', role: 'admin' } });

路由跳转：替换当前路径

router.replace({ path: '/home' });

路由跳转：回退和前进标签

router.go(-1); //回退
router.go(0); //刷新
router.go(1); //前进

2、路由收参：

<script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";

// 使用 useRoute 获取参数
const route = useRoute();
let {query} = route //获取query参数
let {params} = route   //获取params参数
</script>

<template>
   <div>
     {{params.name}}  {{params.age}}
     {{query.a}}  {{query.b}}
   </div>
</template>

3、路径传参和收参

配置路由时，设置路径参数：

const routes = [
  {
    path: '/user/:id', // 定义路径参数 id
    component: UserProfile,
  },
];

页面vue中接收路径参数：

<script setup>
import { useRoute } from 'vue-router'
// 获取路由实例
const route = useRoute()
// 直接获取路径参数（默认是字符串类型）
const userId = route.params.id
// 如果需要数字类型，可手动转换
const userIdNum = Number(route.params.id)
</script>

4、监听参数变化：

当从 /user/1 跳转到 /user/2 时，组件不会重新创建 , 需监听参数变化以执行相应逻辑：

实现方案：

<script setup>
import { useRoute, watch } from 'vue-router'

const route = useRoute()

// 监听 params 整体变化
watch(
  () => route.params,
  (newParams, oldParams) => {
    console.log('参数变化：', newParams.id)
    // 执行参数变化后的逻辑（如重新请求数据）
  },
  { immediate: true } // 初始加载时立即执行一次
)

// 只监听某个具体参数（如 id）
watch(
  () => route.params.id,
  (newId, oldId) => {
    console.log('ID变化：', newId)
  }
)
</script>

5、注意事项：

路径参数始终是字符串类型，如需数字 / 布尔值等类型需手动转换（如 Number()）。
嵌套路由中，route.params 会包含所有层级的参数（如 /user/:id/post/:postId 可同时获取 id 和 postId）。
若参数可能不存在，需做容错处理（如 route.params.id || ‘默认值’）。

附：vue3配置vue-router报错解决方法

问题一：import { createRouter, createWebHashHistory} from 'vue-router'; 爆红

解决方法：引入报错使用命令 pnpm install vue-router@4.2.1 -D

安装vue-router4.2.1 版本

问题二：routes爆红

找了很久发现是路由的组件component写出了comment,我无语了

如果还不能解决可以使用RouteRecordraw定义路由配置

import { RouteRecordRaw } from 'vue-router';
export const constantRoute: Array<RouteRecordRaw> = [
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login'
    },
    {
        path: '/',
        component: () => import('@/views/home/index.vue'),
        name: 'layout'
    },
    {
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404'
    },
    // 任意路由
    {
        path: '/pathMatch(.*)*',
        redirect: '/404',
        name: 'Any'
    }
]

总结

到此这篇关于vue3中vue-router安装配置使用的文章就介绍到这了,更多相关vue3 vue-router安装配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！