vue 导航守卫

vue 导航守卫

• 全局导航守卫

const router = new VueRouter({
    routes:[
        {
            path: '/',
            name: '',
            component: 组件文件,
            // 路由独享守卫
            beforeEnter: (to, from, next) => {
                // to 要去到的页面的路由对象
    // from 要离开的页面的路由对象
    // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
    // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
    // 在next中也可以传递一个对象 这个对象可以使用上述（编程式路由中的任何一种跳转方法）的跳转方法中的任何一种
            }
        }
    ]
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
    // to 要去到的页面的路由对象
    // from 要离开的页面的路由对象
    // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
    // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
    // 在next中也可以传递一个对象 这个对象可以使用上述（编程式路由中的任何一种跳转方法）的跳转方法中的任何一种
})
// 全局解析守卫
// router.beforeReslove((to, from) => {

// })
//  全局后置守卫
// router.afterEach((to, from) => {

// })
// 组件内的守卫
Vue.component('child', {
    template: '',
    data() {
        return {}
    },
beforeRouteEnter(to, from, next) {
// to 要去到的页面的路由对象
    // from 要离开的页面的路由对象
    // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
    // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
    // console.log(this)// 注意 这里的this指向的是window对象
    next(vm => {
        // vm指向vue的实例化对象
    })
}
beforeRouteUpdate(to,from, next) {
// to 要去到的页面的路由对象
    // from 要离开的页面的路由对象
    // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
    // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
}
// 离开守卫通常用来禁止用户在还未保存修改前突然离开
beforeRouteLeave(to,from, next){

}
})
new Vue({
    el: '#app',
    router
})