Vue路由2-路由嵌套
某些时候一个父组件里面嵌套有子组件，然后希望展示父组件时，子组件也能够随着一起展示。 这时候就需要用到路由嵌套，不然单独为两个组件定义访问路由，子组件会直接覆盖父组件，而不是一起出现！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../../js/vue.js"></script> <script src="../../js/vue-router.js"></script> </head> <style> .myactive{ color:red; font-size:24px; } </style> <body> <div id="app"> <router-link to='/login'>登录</router-link> <!-- to 就表示路由路径，不需要带上#号 route-link 默认会被渲染为超链接 可以使用 tag='span/label'改变渲染方式，但是点击事件一定会有，同样可以hash路由 --> <router-link to='/register/621/lisi'>注册</router-link> <router-view></router-view> </div> </body> <script> Vue.config.devtools = true; //vue-rourer.js 被引入后，window全局就会多了一个VueRouter这样一个构造函数，可以new 一个路由配置实例 let comobj1 = { template:'<h1>登录组件<br> <router-link to="/login/loginqiantao">登录</router-link><router-view></router-view> </h1>', //<router-link to="/login/loginqiantao"> 如果 /login 能匹配到的话，/login/loginqiantao 要想匹配到，必须路由规则定义时嵌套一个 loginqiantao的子路由规则！
created(){
console.log(this.$route.query)//vue-router 提供的用于访问url参数 } } let comobj2 = { template:'<h1>注册组件 使用params接收占位符方式提供的参数---传入id为:{{$route.params.id }}</h1>', created() { console.log(this.$route) } } let comobj3 = { template:'<h2>这是嵌套路由1所展示的组件</h2>', created() { console.log(this.$route) } } let comobj4 = { template:'<h2>这是嵌套路由2所展示的组件</h2>', created() { console.log(this.$route) } } let routerobj = new VueRouter({ routes:[ //注意此处为 routes 不是 routers {path:'/',redirect:'/login'},//如果请求的是其他路径，比如请求域名+’/‘这样一个路径，比较好的方式就是如果没登录过就跳转【redirect】到登录界面【与nodejs的redirect本质上不同】 {path:'/login',component:comobj1,children:[{path:'loginqiantao',component:comobj3}]}, //children 属性用于设置 嵌套路由【嵌套路由也需要router-link和 router-view进行链接和占位显示】【嵌套路由不需要带'/' 】， {path:'/register/:id/:name',component:comobj2,children:[{path:'registerqiantao',component:comobj4}]},//传参方拾式二 ] ,linkActiveClass:'myactive' }) let vm = new Vue({ el:'#app', data:{ }, methods:{ }, router:routerobj //将路由实例与vue实例关联起来，注册路由实例 }) </script> </html>
总结：
- <router-view>和<router-link> 可以嵌套使用；
- 只不过嵌套使用时，路由规则也得嵌套定义;，并且子路由组件需要用<router-view>进行占位；
- 子路由嵌套必须使用 children:[{}] 关键字；
- 路由嵌套，组件之间就会存在嵌套关系；
- 嵌套路由不需要带'/'。路由嵌套，组件一定也要嵌套才能到达预期的效果！
