VueRouter进阶（2）-路由元信息

路由元信息

为什么会有这个东西呢？
我们知道我们浏览一些网站的时候有需要验证登录的也有不需要验证登录的，如果所有页面都在做成验证登录的话对于用户的体验也是极差的，所以这个时候路由元信息就起到了很大的作用。

简单介绍

主人公：meta字段

介绍：
我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。路由记录会暴露在对应路由对象上，我们可以通过$route.matched获取到当前路由所有的路由记录，$route.matched[n].meta可以获取其中一个路由记录的meta字段

栗子：

let routes = [{
    path: '/foo',
    name: 'foo',
    component: foo,
    children: [{
        path: 'bar',
        component: bar,
        meta: {
            needLogin: true//需要判断登录
        }
    }]
}, {
    path: '/login',
    name: 'login',
    component: login
}];

假设localhost:8080为项目地址
当访问localhost:8080/#/foo/bar的时候我们需要判断登录怎么办呢
上代码（用到了导航守卫的全局守卫中的beforeEach）：

let router = new VueRouter({
    routes
});
router.beforeEach((to, from, next) => {
    //判断路由记录是否需要验证登录
    if(to.matched.some(current => current.meta.needLogin)){
        //只要记录上需要登录 我们就得验证
        /*
         * 自己封装方法判断登录 sessionstorage localstorage cookie啥的自行决定
         */
         let isLogin = getLoginStatus();//自己定义的判断登录的方法
         if(!isLogin) {
             next({
                 path: '/login', //跳转到登录页
                 query: {
                     redirect: to.fullPath //登录页需要知道从哪跳过来的，方便登录成功后回到原页面
                 }
             });
         } else {
             next();
         }
    } else {
        next();
    }
});
ATT： next一定要执行不然钩子函数不会resolved。