时间:2021-05-26
路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们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: '/', 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路由守卫之路由独享守卫,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
导航守卫导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的,单个路由独享的,或者组件级的。(记住参数或查询的改变并不会触发进入/
什么是beforeEach?beforeEach是一个vue-router的路由导航钩子,一般我用它做路由守卫。什么是路由守卫?路由跳转前做一些验证,比如登录验
最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记官方文档导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截
本文实例讲述了vue路由守卫+登录态管理。分享给大家供大家参考,具体如下:在路由文件需要守卫的path后面加上meta{path:'/home',compone
在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫。分为全局导航钩子,单个路由独享的钩子,组件内钩子。三种类型的钩子只是用的