路由守卫总共有7个
全局路由守卫:
beforeEach 前置守卫
affterEach 后置守卫
beforeResolve 解析守卫
路由的守卫
beforeRouterEnter 进入组件之前触发,在Created前面
beforeRouterUpdated 路由更新但是内容不会改变
beforeRouterLeave 离开之前触发,在beforeDestory之前触发
路由独享守卫
beforeEnter 读取路由的信息
一.进入一个页面路由所执行的钩子
代码：
路由的配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '@/views/a.vue'
import aa from '@/views/aa.vue'
import a3 from '@/views/a3.vue'
import af from '@/views/af.vue'Vue.use(VueRouter)const routes = [{path: '/',name: '首页',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () =>import(/* webpackChunkName: "about" */ '../views/shouye.vue'),beforeEnter: (to, from, next) => {console.log('路由独享守卫beforeEnter')next()},children: [{path: '1/:id?',component: a,meta: {toLogin: true},xxx: false},{path: '/2/:id?', // ?代表参数值可传可不传，不写?一定要传component: aa,meta: {toLogin: true}},{path: '3',name: 'a3',component: a3},{path: 'f',name: 'af',component: af}]}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})
// 全局的前置守卫
router.beforeEach((to, from, next) => {console.log('前置路由守卫beforeEach')next()
})
// 后置路由守卫
router.afterEach((to, from, next) => {console.log('后置路由守卫affterEach')next()
})
// 全局的解析守卫
router.beforeResolve((to, from, next) => {console.log('全局解析守卫beforeResolve')next()
})export default router
a页面的配置
<template><div class=""><el-container><el-header>Header</el-header><el-container><el-aside width="200px"><sideBar /></el-aside><el-main><!-- 二级路的出口 --><router-view></router-view></el-main></el-container></el-container></div>
</template><script>
import sideBar from '@/views/sideBar/index.vue'
export default {components: {sideBar},beforeRouteEnter (to, from, next) {console.log('beforeRouteEnter')next()},beforeRouteLeave (to, from, next) {console.log('beforeRouteLeave')next()},name: '',methods: {}
}
</script><style scoped>
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;line-height: 200px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;line-height: 160px;
}body > .el-container {margin-bottom: 40px;
}.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {line-height: 260px;
}.el-container:nth-child(7) .el-aside {line-height: 320px;
}
</style>
beforeEach------------------->beforeEnter------------->beforeRouterEnter------------->beforeResolve-------->affterEach
进入前置守卫--------------->读取路由信息-------------->进入组件---------------->进行解析------------>
进入后置守卫。
viwe图：
二.全局的路由守卫所有组件都会经过。
全局的路由守卫:
beforeEach
affterEach
beoforeResolve
点击跳转:
全局的只经过一次，
路由独享的守卫：
作用:主要是读取当前路由的信息。
组件的守卫：
beforeRouterEnter 进入组件之前。组件没创建在created之前
beforeRouterUpdated 路由更新但是内容不会改变
beforeRouterLeave 离开组件之前，此时进入了组件，但是没离开
三.to ,next ,from
1.to 表示要去哪里
2.from 表示从哪里来
3.next 表示是否方向
例子:
next(false) 表示不能通过
next（‘/login’）表示跳转到登录页面
主要点,不写next()默认是通不过的，此时也不能进入页面。
