组件内守卫
beforeRouteLeave
1beforeRouteLeave(to, from, next) {
2 //to:要去到哪里，from:从那个页面过来 next 是否允许跳转
3}
只有next执行的时候才会执行路由跳转。
beforeRouteEnter
当进入某个组件的时执行，参数也是 to, from, next
1 beforeRouteEnter(to, from, next){
2 //这里只有当执行next才会放行
3 }
这个守卫中的this，指向的是undefined，因为组件还没有实列成功
解决不能获取组件实列
1beforeRouteEnter (to, from, next) {
2 next(vm => {
3 console.log(vm)
4 })
5}
beforeRouteUpdate
当路由更新的时候执行
1export default {
2 beforeRouteUpdate(to, from, next){
3 //路由更新执行，
4 console.log('update');
5 }
6}
⚠️⚠️⚠️有时候路由变化需要页面数据更新， 但因为在同一个组件，组件没有被注销， 所以导致create,update不会再执行， 这个时候可以考虑使用beforeRouteUpdate
路由独享守卫`beforeEnter`
配置方式
1{
2 path: '/home',
3 name: 'home',
4 component: Home,
5 beforeEnter (to, from, next) {
6 //next();
7 }
8}
全局守卫
在main.js上配置守卫
- 初始化执行
beforeEach
1router.beforeEach((to, from, next) => {
2 next();
3})
- 加在完成执行
beforeResolve
1router.beforeResolve((to, from, next) => {
2 //当所有都加在完成，这里会被执行
3 next();
4})
- 最后执行
afterEach,这里没有参数to,from,next
1router.afterEach(() => {
2 console.log('all Done')
3})
守卫的执行顺序
全局守卫，路由守卫， 组件内守卫
路由元数据
其实就是给路由添加数据，使用方式如下
1{
2 path: '/student',
3 name: 'student',
4 //这里的meta就是路由元信息
5 meta: {
6 login: true //这里为登入准备的信息， 不同的需求，自己可以定义不同的属性，语言话就行
7 }
8}
next可以直接去到某个路径
1 next('/login')
🚬每天分享一点点， 欢迎大家讨论， 共同学习， 有不对的地方，欢迎指出🚬
