Vue 嵌套路由、路由守卫
嵌套路由
嵌套路由:一个路由配置中嵌套其他的路由配置。
嵌套路由挺常用的,比如导航栏有首页、文章、想法、留言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那里拦截器、过滤器什么的早就对请求进行了过滤,登录检测、权限检查已经做过了,在视图这里没必要再使用路由守卫来过滤。
路由守卫用得很少,了解即可。