vue-router路由元信息及keep-alive组件级缓存

　　路由元信息？（黑人问号脸？？？）是不是这么官方的解释很多人都会一脸懵？那么我们说meta，是不是很多人恍然大悟，因为在项目中用到或者看到过呢？

　　是的，路由元信息就是我们定义路由时配置的meta字段；那么这个meta的作用是什么呢？

　　首先看一个场景：

　　　　通常我们在开发网站或者移动应用的时候，我们通常会有网页权限验证的需求（别说你没有，你肯定有），这种需求一般是指需要登录后才可进入，也就是需要用户登录获取用户Token或者用户信息之后才可进入；当这个需求下来的时候，我们作为前端开发人员的第一反应是路由守卫啊，一个路由前置守卫通过判断to.path就可以解决；

　　　　用to.path来判断做权限验证会有两个问题：　　　　

　　　　1：首先，如果需要做权限验证的页面很多呢？难道我们要通过if(to.path==='/' || to.path === '/home')这种方式来一个个的添加路径判断吗？

　　　　2：然后，routes管理器中会有很多json对象，这种json对象我们通常把它叫做路由记录，路由记录是可以嵌套的，允许存在父子关系；我们用if来判断的时候，会有匹配不完全的问题，例如你匹配了/home，那么/home/list呢，这个将不会被匹配到；

　　　　我们的理想状态下是假如我要限制了/home，那么不管你路径是/home/index也好还是/home/home也好，只要是home下来的子路由记录统统都需要登录后才能访问；

　　　　这个时候我们就可以考虑用路由元信息meta来进行处理；

　　　　首先简单的看一下页面效果：

　　

 

 

 　　我们的路由管理器中的路由记录配置如下：

const routes=[
    {
        path:'/page1',
        component:page1,
        meta:{
            login:true
        },
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ]
    },

    {
        path:"/page2",
        component:page2,
        meta:{
            login:false
        }
    },
]