概念:
路由守卫:就是进入当前路由前,有个人“门卫”进行保护,也可以理解为“安检”。
路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
1.全局路由守卫
全局路由守卫有个两个:一个是全局前置守卫,一个是全局后置守卫 ,钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个。
router.beforeEach((to, from, next) => { console.log(to) => // 到哪个页面去?
console.log(from) => // 从哪个页面来?
next() => // 一个回调函数
} router.afterEach(to,from) = {}
beforeEach:在路由跳转前触发,参数包括to,from,next(参数会单独介绍)3个,这个钩子作用主要是用于登录验证,就是路由还没跳转前告知,跳转后再通知就晚了。
beforeResolve:在组件被解析后,这个钩子函数和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个。
afterEach:和beforeEach相反,它是在路由跳转完成后触发,参数包括to,from没有next,它发生在beforeEach和beforeResolve之后,beforeRouteEnter之前。
2.组件路由守卫
在Vue组件里有个函数叫作:beforeRouteEnter。就是完成路由守卫的,表示进入当前路由前要做什么?
let goodslist={ data:function(){ return {} }, template:"<h1>商品列表</h1>", beforeRouteEnter:function(to, from, next) {//进入组件前执行。
console.log(to); console.log(from); next('/login');//如果加了这句话,就永远进入不了当前组件,因为,无条件跳转到/login
}, created:function(){ console.log(this.$router);//在任何组件里都能看的router对象。因为,把router对象放在vue对象里
console.log(this.$router.options);//这是路由配置
console.log(this.$route);//当前路由,就是路径
} }
示例代码中,
beforeRouteEnter:function(to, from, next) {//进入组件前执行。
console.log(to);
console.log(from);
next(‘/login’);//如果加了这句话,就永远进入不了当前组件,因为,无条件跳转到/login
},
完成的是路由守卫的工作,其实上面的代码,没有写路由守卫的逻辑,只是,解释了beforeRouteEnter函数的执行时机和参数的作用:
1、beforeRouteEnter 函数的执行时机,当点击路由连接时,进入组件时,组件还没有显示时执行
2、to:表示当前路由,即要进入的路由
3、from:表示从哪来的,
4、next() 表示下一步要干啥,next(‘/addGoods’)就表示下一步,调到路由 /addGoods
所以,以上代码的执行结果时,如果你要想跳转到当前组件,“没门”,永远进入的都是 /login路由对应的组件。
3.路由独享守卫
export default new VueRouter({ routes: [ { path: '/', name: 'home', component: 'Home', beforeEnter: (to, from, next) => {
} } ] })
和beforeEach完全相同,如果都设置则在beforeEach之后紧随执行,参数to、from、next。
今天的文章vue路由守卫_vue下一页分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/51540.html