位置: IT常识 - 正文
【Vue路由（router）进一步详解】(路由vue-router)
编辑：rootadmin推荐整理分享【Vue路由（router）进一步详解】(路由vue-router)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue路由详解,路由vue-router,路由vue-router,路由vue-router,vue router-view路由详解,vue router-view路由详解,vue router路由配置,vue路由routerview,内容如对您有帮助，希望把文章链接给更多的朋友！
本篇文章主要针对已经掌握Vue路由（router）基础以及路由嵌套的用户群体，如果你是Vue路由初学者的话，不仿先去看看【Vue路由（router）的基本使用】这篇文章
接上一篇文章理解Vue路由中常用的知识点
在实际开发过程中，我们可能不单单要实现简单的页面跳转动作，可能在页面跳转的同时，我们需要携带一些数据给对应的路由组件，也就是说，涉及路由的传参，那怎么实现路由传参呢，其实有三种方式可以使得携带参数至指定的路由组件，他们分别是query，params以及在学组件时已经熟知的props
query属性切换路由并传递参数用法
传递参数：
<!-- 方法一，字符串写法 --><router-link :to="/跳转路径/跳转路径?参数一='xxxx'&参数二='XXXXX'">跳转</router-link><!-- 方法二，对象写法 --><router-link :to="{ path:'/路径/路径/XXX', query:{ data1:'XXX', data2:'XXX', ..... } }">>跳转</router-link>
值得注意的一个点是，在上述用法中，我们所传递的参数都是写死的参数，但开发中更多的情况是我们传递的参数可能是动态的数据，对象写法还是一样的，但是字符串写法又该如何实现呢？
如下： 尚硅谷Vue讲师张天禹介绍了ES6中字符串模板加上直接赋值的写法：
<router-link :to="`/home/messageA/detailA?id=${m.id}&title=${m.title}`">跳转</router-link>路由组件中接收参数：
$router.query.XXX$router.query.XXX$router.query.XXX具体实例代码如下：本篇文章是在【Vue路由（router）的基本使用】的基础上写的，所以重复的，没有改动的代码我就不再展示，这里我们用TestA.vue组件举例，数据存储在TestA.vue中，但我希望把数据传递到它的子路由上，实现动态的数据展示
创建TestA.vue的子路由组件DataList.vue:
<template> <div> <ul> <!-- 采用插值语法就可以拿到父级路由中的数据 --> <li>{{$route.query.introduce}}</li> </ul> </div></template><script>export default { name:'DataList'}</script><style></style>src/router/index.js的变化:
//该文件用于创建整个应用的router//首先，需要引用vue-routerimport VueRouter from "vue-router";//引入路由组件import TestA from '../pages/TestA'import TestB from '../pages/TestB'// 引入二级路由组件import TestBHzw from '../pages/TestBHzw'import TestBHyrz from '../pages/TestBHyrz'import DataList from '../pages/DataList'//创建并暴露一个VueRouterexport default new VueRouter({ routes:[ //配置路由路径和路由组件 { //这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混 path:'/TestA', component:TestA, //要跳转到的组件 children:[ { path:'DataList', component:DataList } ] }, { path:'/TestB', component:TestB, // 配置二级路由 children:[ { path:'TestBHzw', //重点注意，不要加 / component:TestBHzw }, { path:'TestBHyrz', component:TestBHyrz } ] } ]})TestA.vue:
<template> <div> <h4>著名动漫简介</h4> <ul> <li v-for="i in DataList" :key="i.id"> <!-- 使用query参数传递动态参数 --> <router-link :to="{ path:'/TestA/DataList', query:{ introduce:i.introduce } }">{{i.name}}</router-link> </li> </ul> <router-view></router-view> </div></template><script>export default { name:'TestA', data(){ return{ DataList:[ { id:1, name:'《海贼王》', introduce:'《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。' }, { id:2, name:'《火影忍者》', introduce:'电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。' }, { id:3, name:'《斗破苍穹》', introduce:'《斗破苍穹》是一部由阅文集团旗下起点中文网作家天蚕土豆同名玄幻长篇经典小说改编的动画。该动画第一季已于2017年1月7日在腾讯视频上映，bilibili同步跟播，共十二集。' }, { id:4, name:'《鬼灭之刃》', introduce:'《鬼灭之刃》是日本漫画家吾峠呼世晴所著的少年漫画，自2016年2月15日—2020年5月11日在集英社《周刊少年Jump》上连载。已完结。' } ] } }}</script><style scoped>h4{ text-align: center;}a{ text-decoration: none;}.active:visited{ color: brown;}</style>其他组件是没有改动过的
效果图： 此时，我们处于一级路由，TestA.vue组件的子路由是没有展示的 当我们鼠标点击对应动漫列表时，就会出现动漫的简介，此时就完成了利用query参数传递数据。
params属性params属性起到的作用和query差不多，都是用于传递和接收参数，只不过，它是在src/router/index.js中进行配置
{ path:'/一级路径', component:XXX, children:[ { path:'二级路径', component:XXX, children:[ name:'name', path:'XXX/:name/:data', //使用占位符上一篇：【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）(echarts在地图上标记图标)
