当前位置：首页 > news >正文

02-vue3中vue-router安装配置使用

news 2025/9/24 18:04:46

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">// RouterViewimport { 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', // 定义路径参数 idcomponent: 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>