路由独立守卫，顾名思义就是这个路由自己的守卫任务，就如同咱们LOL，我们守卫的就是独立一条路，保证我们这条路不要被敌人攻克(当然我们也得打团配合)
在官方定义是这样说的：你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
参数如下：
beforeEnter(to,from,next)
// to 要进入的目标，路由对象
// from 当前导航正要离开的路由
// next 初步认为是展示页面；（是否显示跳转页面）
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由
我们在这里使用使用一个案例来演示它的用法；案例中独立路由单独检测是否在登入状态，在没有登录的情况下弹到登录界面，和全局登录效果一致，只不过只保留了自己；
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); import Index from './Index/Index.vue' import AA from './views/AA.vue' import DD from './views/DD.vue' import EE from './views/EE.vue' export default { routes: [ { path: 'https://www.jb51.net/', component: Index, name: 'index', children: [ { path: 'AA', component: AA, name: 'aa', beforeEnter: (to, from, next) => { if (to.path == '/DD') { next() } else { alert('请登入'); next('/DD') } } }, { path: 'DD', component: DD, name: 'dd' }, { path: 'EE', component: EE, name: 'ee' }, ] } ] }
为大家附上源码地址https://gitee.com/web94/vueluyouduxiangshouwei
总结
以上所述是小编给大家介绍的Vue路由守卫之路由独享守卫,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: