vue路由全局守卫的那些事

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：
1、to:即将要进入的目标路由对象；
2、from:当前导航即将要离开的路由对象；
3、next ：调用该方法 后，才能进入下一个钩子函数（afterEach）。

 next()//直接进to 所指路由
 next(false) //中断当前路由
 next('route') //跳转指定路由
 next('error') //跳转错误路由

beforeEach：

常规路由配置文件：

const whitelist = ['/login']

router.beforeEach((to, from, next) => {

    if (whitelist.indexOf(to.path) !== -1) {
        next()
    } else {
        /**
         * 不在白名单 验证是否存在token 如果不存在 重定向会登录页
         *
         * */
        if (store.getters.getToken) {//强行跳到相应的登录开始页面
            next()
        } else {
            next('/login')
        }
    }
})

export default router

afterEach:

和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身，一般beforeEach用的最多，afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收next
    console.log(to);
    console.log(from);
})

router.addRoute

动态添加更多的路由规则

添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

函数签名:

addRoute(route: RouteConfig): () => void

router.addRoute

添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

函数签名:

addRoute(parentName: string, route: RouteConfig): () => void

相关代码：

es6用法：...将数组序列化，成为逗号隔开的序列，对象解构。

写法一：router.addRoute（parentname，{...routeConfig,component :loadmodule(pasth}）

 es6用法：变量花括号内部变量代表找到对象的对应的属性赋值。

const {name ,path} =routeConfig

写法二：router.addRoute（parentname，{name ,path,component :loadmodule(pasth}）

function loadModule(path) {
  return (resolve) => require([`@views/modules/${path}`], resolve)
}

注意addroute中两个参数代表原有路由name中添加子路由。！！！

vue fullpath 和 path的区别

fullPath是路由全地址，包括连接携带的参数，如：127.0.0.1/index?page=1，fullPath为/index?page=1

path是路径，不带参数，如：127.0.0.1/index?page=1，path为/index