嵌套路由
嵌套路由：一个路由配置中嵌套其他的路由配置。
嵌套路由挺常用的，比如导航栏有首页、文章、想法、留言4个模块，我们以嵌套路由的形式集成这些模块，在导航栏中点击对应的条目，就会路由到对应的页面（下方显示对应的页面），和html的<iframe>效果差不多。
demo 嵌套路由
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> <!-- 引入路由插件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="app"></div> <script> // 导航 var Nav={ template:` <div> <router-link :to="{name:'nav.index'}">首页</router-link> <router-link :to="{name:'nav.article'}">文章</router-link> <router-link :to="{name:'nav.idea'}">想法</router-link> <router-link :to="{name:'nav.message'}">留言</router-link> <router-view></router-view> <!-- 留坑，点击上面4个路由链接，会在此处显示对应的页面 --> </div> `, } // 首页 var Index={ template:` <div> <p>这是首页部分</p> </div> `, } // 文章 var Article={ template:` <div> <p>这是文章部分</p> </div> `, } // 想法 var Idea={ template:` <div> <p>这是想法部分</p> </div> `, } // 留言 var Message={ template:` <div> <p>这是留言部分</p> </div> `, } // 安装路由插件 Vue.use(VueRouter); // 创建路由对象 var router=new VueRouter({ // 配置路由规则 routes:[ {path:'/',name:'nav',component:Nav,children:[ //path直接映射到根路径（当前html页面下）下，children配置要嵌套的路由,对象数组形式 {path:'/index',name:'nav.index',component:Index}, //嵌套的路由的name里一般都要带上外部的路由容器，一看就知道关系 {path:'/article',name:'nav.article',component:Article}, {path:'/idea',name:'nav.idea',component:Idea}, {path:'/message',name:'nav.message',component:Message}, {path:'',name:'nav.index',component:Index}, //要点击nav中对应的链接才会路由到指定页面，我们给它配置一个默认的路由页面，path:'' ]}, ] }); new Vue({ el:'#app', router, //使用路由 template:` <div> <router-view></router-view> <!-- 留给nav的坑位 --> </div> `, }) </script> </body> </html>
嵌套的路由的path可以使用相对路径、也可以使用绝对路径
{path:'/nav',name:'nav',component:Nav,children:[
{path:'/index',name:'nav.index',component:Index} //绝对路径
]}
/表示根路径（当前html页面）。index的访问路径是.....html#/index
{path:'/nav',name:'nav',component:Nav,children:[
{path:'index',name:'nav.index',component:Index} //相对路径，相对于外部路由
]}
index的访问路径是....html#/nav/index
路由守卫
一个页面路由到另一个页面，路由到目标页面之前可以做一些处理，比如登录检测、权限检查，不满足就不路由到目标页面，给出提示信息。
demo 路由守卫
// 安装路由插件 Vue.use(VueRouter); // 创建路由对象 var router=new VueRouter({ // 配置路由规则 routes:[ //..... ] }); new Vue({ el:'#app', template:` <div> <router-view></router-view> <!-- 留坑 --> </div> `, router, data(){ return{ //...... } }, mounted(){ router.beforeEach( (to,from)=>{ //路由守卫。使用ES6的箭头函数做一些前处理。2个参数分别封装了目标页面、上一个页面的信息 //...... }); }, })
路由守卫要写在html页面的new Vue()中，一般是写在mouted(){ }中。
上一个页面要传数据给目标页面，比如username、uid、loginstate、role什么的，可以在data中用一些变量保存这些数据，路由守卫根据这些数据进行登录检测、权限检测。
执行到mouted()时，数据已经挂载，可以获取到数据，路由守卫可以拿到数据进行检测啦。
beforeEach，顾名思义，每次路由到目标页面时，都会使用路由守卫进行检测。
现在好多应用都是mvc模式，controller那里拦截器、过滤器什么的早就对请求进行了过滤，登录检测、权限检查已经做过了，在视图这里没必要再使用路由守卫来过滤。
路由守卫用得很少，了解即可。