③. 路由重定向
3>.路由重定向
- ①. 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；
- ②. 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
④. 嵌套路由
4>. 嵌套路由
- ①. 使用嵌套路由要实现的效果是
②. 核心代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <router-view></router-view> </div> </body> <script src="lib/vue_2.5.22.js"></script> <script src="lib/vue-router_3.0.2.js"></script> <script> const User={ data:function(){ return{ msg:"User component" } }, template:` <div> {{msg}} </div> ` }; const Register={ data:function(){ return{ msg:'Register component' } }, template:` <div> {{msg}} <hr/> <router-link to="/register/tab1">Tab1</router-link> <router-link to="/register/tab2">Tab2</router-link> <router-view/> </div> ` }; const tab1={ template:` <h3>tab1 hello</h3> ` }; const tab2={ template:` <h3>tab2 hello</h3> ` }; //定义路由规则 var router=new VueRouter({ routes:[ {path:'/user',component:User}, //注意:这里的children 是一个数组 {path:'/Register',component:Register,children:[ {path:'/register/tab1',component:tab1}, {path:'/register/tab2',component:tab2}, ]} ] }); var vm=new Vue({ el:'#app', data:{ }, router }); </script> </html>
