我们给路由也起名字，这样方便使用，这里还是以 writeback为例
{ path: \'/writeback\',//点击的路径 // 命名视图 components: { default: writeback, common: vuefooter }, // 命名路由 name: \'writeback\', },修改它的导航链接，这样就完成了
<router-link :to="{name:\'writeback\'}">回复我的</router-link> 嵌套路由和路由传参这个嵌套大家就知道了，肯定是路由中有路由，就像组件中有组件一样，又是套娃行为
来看下这个界面，1部分是导航，2部分是路由展示的组件同时相对于3部分又是一个导航，3部分是路由展示的组件，这就是一个很明显的路由嵌套，我们就来实现一下
首先我们要添加这个我的消息这个导航链接
<div> <ul> <li> <router-link :to="{name:\'writeback\'}">回复我的</router-link> </li> <li> <router-link to="/aite">@我的</router-link> </li> <li> <router-link to="/zan">收到赞的</router-link> </li> <li> <router-link to="/mymsg">我的消息</router-link> </li> </ul> </div>然后定义第二部分和第三部分的组件
这个第二部分的组件模板，它里面首先是一个导航，这个导航我循环渲染出来的，模拟了十个用户聊天导航，并且是使用了 :to也就是绑定动态的路径，路径后面跟上了 index也就是把当前是第几个用户传递给第三部分这就是路由传参params方式
路由传参params方式 <template> <div> <div>消息</div> <div> <ul> <ol v-for="index in 10" > <router-link :to="\'/mymsg/msgcontent/\'+index">用户{{index}}</router-link> </ol> </ul> <router-view></router-view> </div> </div> </template>定义第三部分组件模板
<template> <div> 这是和用户{{id}}具体的消息界面 </div> </template>定义这两个组件，为什么要使用 props来接受传值那？下面解释
//第二部分组件 const mymsg = { template: \'#mymsg\', } //第三部分组件 const msgcontent = { template: \'#msgcontent\', props: [\'index\'], } 嵌套路由然后定义这个嵌套路由，这个 mymsg就是第二部分的路由配置，然后给它配置一个children这里面就是嵌套的路由配置了，首先path后面的 :id就是匹配我们上面定义的router-link传参的index，这个props: true就是将我们传递的index值，自动注册为第三部分组件的 props
// 嵌套路由 { path: \'/mymsg\', component: mymsg, children: [{ path: \'msgcontent/:index\', component: msgcontent, props: true }] }看下效果，这就完成了
我们回到前面的第一部分的导航，修改一下这个我得消息的导航，使用?连接传递值
<router-link to="/mymsg?username=lookroot">我的消息</router-link>如果我们不适用上面的props来接受传值该怎么做呢？
修改一下组件定义，created周期时使用this.$route.query来接受query方式的传值，赋值给username
const mymsg = { template: \'#mymsg\', data() { return { username: \'\' } }, created() { // query传值 this.username = this.$route.query.username }, }然后在组件模板中渲染这个数据
<template> <div> 这是和用户{{id}}具体的消息界面 </div> </template>看下效果是可以的