一.就是:
比如说,软件系统定制开发当点击商城的购物车的时候,软件系统定制开发需要判断一下是否登录,软件系统定制开发如果没有登录,软件系统定制开发就跳转到登录页面,如果登陆了,就跳转到,相当于有一个守卫在安检
路由守卫有三种:
1:全局钩子: 、 afterEach
2:独享守卫(单个路由里面的钩子): beforeEnter、 beforeLeave
3:组件内守卫:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave全局守卫
router.beforeEach() 进入之前触发
router.afterEach() 进入之后触发
每个守卫方法接收三个参数:①to: Route: 即将要进入的目标路由对象(to是一个对象,是将要进入的路由对象,可以用to.path调用路由对象中的属性)
②from: Route: 当前导航正要离开的路由
③next: Function: 这是一个必须需要调用的方法,执行效果依赖 next 方法的调用参数。
【路由守卫写在main.js文件,或者写在router文件夹下的index.js文件】
① 前置路由守卫(每次切换前被调用)
首先先在需要配置路由守卫的地方加上 meta: { isAuth: true }
- {
- path: '/',
- name: 'Home',
- component: () => import('../views/Home.vue'),
- meta: { isAuth: true, title:'主页' },
- },
- //全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
- router.beforeEach((to, from, next) => {
- //如果路由需要跳转
- if (to.meta.isAuth) {
- //判断 如果school本地存储是qinghuadaxue的时候,可以进去
- if (localStorage.getItem('school') === 'qinghuadaxue') {
- next() //放行
- } else {
- alert('抱歉,您无权限查看!')
- }
- } else {
- // 否则,放行
- next()
- }
- })
② 后置路由守卫(每次切换后被调用)
是路由跳转之后执行的事件,可以用作跳转路由后更改网页名
首先路由的meta需要配置title的名字
- {
- path: '/',
- name: 'Home',
- component: () => import('../views/Home.vue'),
- meta: { isAuth: true, title:'主页' },
- },
- //全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
- router.afterEach((to, from) => {
- document.title = to.meta.title || '默认名' //修改网页的title
- })
③ 独享路由守卫(某一个路由所单独享用的路由守卫)
独享路由守卫只有前置没有后置
- {
- path: '/',
- name: 'Home',
- component: () => import('../views/Home.vue'),
- meta: { isAuth: true },
- beforeEnter: (to, from, next) => {
- if (to.meta.isAuth) { //判断是否需要授权
- if (localStorage.getItem('school') === 'qinghuadaxue') {
- next() //放行
- } else {
- alert('抱歉,您无权限查看!')
- }
- } else {
- next() //放行
- }
- }
- },
④ 组件内守卫(某一个路由所单独享用的路由守卫)
独享路由守卫只有前置没有后置,直接写在.vue文件中
- //通过路由规则,进入该组件时被调用
- beforeRouteEnter(to,from,next) {
- if(toString.meta.isAuth){
- if(localStorage.getTime('school')==='qinghuadaxue'){
- next()
- }else{
- alert('学校名不对,无权限查看!')
- }
- } else{
- next()
- }
- },
-
- //通过路由规则,离开该组件时被调用
- beforeRouteLeave(to,from,next) {
- next()
- }