0
点赞
收藏
分享

微信扫一扫

Vue路由守卫(全局路由守卫、路由独享守卫、组件内部守卫)

兽怪海北 2021-09-21 阅读 96

一、全局守卫(两种,在main.js文件下设置)

第一种:router.beforeEach((to,from,next)=>{})

#回掉函数中的参数

*to:进入到那个路由去

*from:从那个路由来的(上一个路由)

*next:顺延,next()---(放行)---next('/login')---(不放行,让他跳转到login页面)--函数,决定是否展示你要看到的路由页面

第二种:router.afterEach((to,from)=>{})

#只有两个参数,to:进入到哪个路由去,from:从哪个路由离。

#如下,每次切换路由时,都会弹出alert,点击确定后,展示当前页面。

二、路由独享守卫

#在router文件夹下index.js文件 和path同级。

beforeEnter((to,from,next)=>{//里边的用法和全局一样})

三、组件内部守卫

#在组件.vue内部写和 data(){}同级

//1.组件进入之前的守卫

beforeRouteEnter(to,from,next){//和全局使用一样}    //生命周期还没开始,所以这个函数没有this

//2.组件更新守卫

beforeRouteUpdate(to,from,next){//和全局使用一样}  //  "/:id"动态路由发生变化,页面没有重新加载,触发更新守卫

//3.组件离开守卫

beforeRouteLeave(to,from,next){//和全局使用一样}    //在离开当前路由的时候触发,有this

举报

相关推荐

0 条评论