vue路由守卫

一.介绍

路由守卫：
比如说，当点击商城的购物车的时候，需要判断一下是否登录，如果没有登录，就跳转到登录页面，如果登陆了，就跳转到购物车页面，相当于有一个守卫在安检

路由守卫有三种：
1：全局钩子： beforeEach、 afterEach
2：独享守卫（单个路由里面的钩子）： beforeEnter
3：组件内守卫：beforeRouteEnter、beforeRouteLeave

每个守卫方法接收三个参数：
①to: Route: 即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性）
②from: Route: 当前导航正要离开的路由
③next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。

二.全局路由守卫

可在main.js里配置

1.全局前置路由守卫

可以用来限制是否放行

用to.name==='xinwen’写不方便，可以在路由规则里配置meta属性
如

    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { isAuth: true, title:'主页' },
    },

isAuth有是否授权的意思

2.全局后置路由守卫

可以用作跳转路由后更改网页名

三.独享路由守卫

在路由规则里配置
独享路由守卫是某一个路由所单独享用的路由守卫
独享路由守卫只有前置没有后置

    {
        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()  //放行
            }
        }
    },

四.组件内守卫

在组件内配置