Vue 路由导航守卫

Vue 路由导航守卫

一：全局守卫

(1) router.beforeEach

beforeEach((to, from, next) => {}) 接收三个参数，在路由切换成功之前调用

• to 将要进入的目标路由，要去哪里

• from 将要离开的路由，从哪里来

• next 跳转路由，next(false) 中断导航

// router -> index.js
router.beforeEach( (to, from, next) => {
    // 判断你要访问的路由页面路径是否是'login'，若是，则放行
    if(to.path == '/login') return next();
    // 若不是，则跳转到'login'
    next('/login')
})

(2) router.afterEach

afterEach((to, from) => {}) 接收两个参数，在路由切换成功之后调用

• to 将要进入的目标路由，要去哪里

• from 将要离开的路由，从哪里来

// router -> index.js
router.afterEach( (to, from) => {
    // 操作
})

 

二：组件内守卫

(1) beforeRouteEnter

beforeRouteEnter((to, from, next) => {}) 接收三个参数，到达这个组件之前调用

• to 将要进入的目标路由，要去哪里

• from 将要离开的路由，从哪里来

• next 访问组件实例、放行

export default {
    data(){
        return{
            name:"Arya"
        }
    },
    beforeRouteEnter(to,from,next){
        next(vm=>{  // vm相当于组件中的this
            alert("hello" + vm.name);
        })
    }
}

(2) beforeRouteLeave

beforeRouteEnter((to, from, next) => {}) 接收三个参数，离开这个组件时调用

离开这个组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。

beforeRouteLeave(to,from,next){
    if(confirm("确定离开此页面吗？") == true){
        next();
    }else{
        next(false);
    }
}

三：路由独享守卫

　　beforeEnter

用法与全局守卫一致。只是将其写进其中一个路由对象中，只在这个路由下起作用