vue navigation guard
- Global Navigation guards
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
})