---

前言

vue-router 是 Vue.js 官方路由管理器。它和 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得易如反掌。
前面提到过简单的使用路由，直到上文使用404界面发现了个问题，和路由相关，觉得需要掌握的还很多，打算花点时间好好深入的学习一下，路由出山后我觉得问题就能迎刃而解了。

---

一、路由router-link

前文中我们已经配置好了一些路由，先列出来作为准备工作：

//路由器
import {createRouter,createWebHistory} from 'vue-router'import Home from '@/views/Home.vue'
import HelloSH from '@/views/HelloSH.vue'
import About from '@/views/About.vue'
import Login from '@/views/Login.vue'
import CheckboxVue from '@/views/Checkbox.vue'
import vList from '@/components/vlist.vue'import notFound from '@/views/errors/404.vue'//创建路由器
const router = createRouter({history:createWebHistory(),routes:[{path:'/',component:Home},{path:'/hellosh',component:HelloSH},{path:'/about',component:About},{path:'/login',component:Login},{path:'/checkbox',component:CheckboxVue},{path:'/vlist',component:vList},{// 会匹配所有路径path: "/:pathMatch(.*)*",redirect: '/404'},{path:'/404',components:{mainLayout:notFound}}]
})

使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
我在首页增加了两个router-link标签，注意有两种写法：

<template><v-app><v-main><div style="font-size:100px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:33%; " >首页</div><div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:50%; " ><RouterLink to="/vlist" >to list</RouterLink> </div><div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:70%; " ><router-link to="/checkbox" >to checkbox</router-link> </div></v-main></v-app>
</template><script setup lang='ts' name="Home"></script><style lang='less' scoped></style>

分别点击跳转到了相应的路由：


这个标签比较简单也比较常用就不多说了。

二、路由传参

路由跳转时候经常需要传递参数，再学习几种传参方式。

1.query方式

类似get请求的传参方式，用问号标志，&分隔：,在router-link中：

<div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " ><router-link to="/studyRoute?id=123456&name=shanhua" >to studyRoute</router-link> 
</div>

路由配置：

import studyRoute from '@/views/study/Route.vue'...{path:'/studyRoute/:id', //params方式components:{default:studyRoute}}

StudyRoute.vue:

<template><div>query-------<br>id:{{$route.query.id}}<br>name:{{$route.query.name}}</div></template><script setup lang="ts" name="">
</script><style lang='scss' scoped>
</style>

页面展示效果：

还有另一种写法：

 <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " ><router-link :to="{path:'/studyRoute',query:{id:'12345',name:'shanhua'}}">to studyRoute</router-link> </div>

2.params方式

在router-link中：

<div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " ><router-link to="/studyRoute/123456/shanhua" >to studyRoute</router-link> 
</div>

路由配置（注意name在第二种方式中有用的）：

{path:'/studyRoute/:id/:name', //params方式name:'studyRoute',components:{default:studyRoute}
}

StudyRoute.vue:

<template><div>query-------<br>id:{{$route.query.id}}<br>name:{{$route.query.name}}</div><div>params-------<br>id:{{$route.params.id}}<br>name:{{$route.params.name}}</div> 
</template><script setup lang="ts" name="">
</script><style lang='scss' scoped>
</style>

运行结果：

另一种写法：

<div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " ><router-link :to="{name:'studyRoute',//注意此处只能用name不能用pathparams:{id:'12345',name:'shanhua'}}">to studyRoute</router-link> 
</div>

3.props传参

其实这种方式就是让params更加方便的形式，我们在实战中体会。

router-link中的内容不变，还用params方式：

 <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " ><router-link :to="{name:'studyRoute',params:{id:'12345',name:'shanhua'}}">to studyRoute</router-link> </div>

为了对比，在组件中三种方式都留着，Route.vue:

<template><div>query-------<br>id:{{$route.query.id}}<br>name:{{$route.query.name}} </div><div>params-------<br>id:{{$route.params.id}}<br>name:{{$route.params.name}}</div> <div>props-------<br>id:{{id}}<br>name:{{name}}</div> 
</template><script setup lang="ts" name="">defineProps(['id','name'])
</script><style lang='scss' scoped>
</style>

路由配置：

 {path:'/studyRoute/:id/:name', //props方式name:'studyRoute',props:true,components:{default:studyRoute}}

注意增加了个属性props，这个的作用其实就类似在组件中增加了props：

<Route id=':id' name=':name'></Route>

这样，params参数就像props一样传递给了子组件，vue3的写法就可以接收props：

defineProps(['id','name'])

运行结果：

props同时也是兼容params的。

---

总结

路由传参是 vue-router 的核心功能之一，掌握它对于开发复杂的单页应用至关重要。在实际应用中，根据不同的场景选择合适的传参方式，可以使代码更加清晰和易于维护。

人生苦短，若虚度年华，则短暂的人生就太长了。