Vue路由元信息、页面跳转、验证登录时，path与meta有何不同？

在做网站登录验证的时候，使用到beforeEach 钩子函数进行验证操作，如下面代码 ，如果页面路径 path为/goodsList，那么就让它跳转到登录页面，实现了验证登录。

如果需要登录验证的网页很多，怎么办？

1.这里是对比path。

如果需要验证的网页很多，那么必须在 if 条件里得写下所有的路由地址，非常麻烦。
2.因为路由是可以嵌套的。

有 ‘/goodsList’，那么可能会有子路由children（/online）,也就是’/goodsList/online’，再或者还有’/goodsList/offline’、’/goodsList/audit’、’/goodsList/online/edit’等等。

像刚才例子中对比 if 条件 to.path === ‘/goodsList’，非常单一，其他的路径压根不会限制（验证）到，照样能正常登陆！因为每个to.path不一样。

我们所希望的是把 ‘/goodsList’ 限制了，其他所有的以’/goodsList’开头的那些页面也都限制！就像大厅的门口，拦住大厅门口出入，想进入一室二室三室的门就不行了。

我们已经学习Router实例和route对象的区别，其中route对象的属性主要有：

matched是我们关注的重点，它是一个数组，数组可能是多个路由记录：

它的第一项就是 {path: “/goodslist”}，（上图是一个demo，path不同，只是方便阅览）一直到最为具体的当前path （例如：{path: “/goodslist/online/edit”}）。

这里可以循环matched这个数组，看每一项的path 有没有等于/goodsList,只要其中一个有，那么就让它跳转到登录状态

那么这里只是对goodsList进行验证判断，且限制的还是path，如果页面中还有会员列表、资讯列表、广告列表都需要进行验证的时候，用path来做限制似乎有点不好用。

3. meta字段（元数据）
直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了：

这里我们只需要判断item下面的meta对象中的login_require是不是true，就可以做一些限制了

也就是path局限性比较大，对它①自己，它的②子路由，③孙子路由 等等

可以拦截’/singer’, 可以拦截’/singer’/yy ， 可以拦截 ‘/singer’/yy/xxx。根据yy和xxx的变化可能还有很多种，这是对路径 path 验证。这是单一页面，所有变化都在’/singer’及内部；

而 meta比较自由，根据 自定义的 属性去判断就可以了：

path: ‘/singer’,和path: ‘/rank’,是不同路径path，OK是自定义的，并且meta也可以嵌套children当中，(上图没有书写)。

4.meta其他的妙用
4.1 配置组件是否需要缓存

{
    path:"/test",
    name:"test",
    component:()=>import("@/components/test"),
    meta:{
        title:"测试页面", //配置title
        keepAlive: true //是否缓存
    }
}

4.2、配置此路由的标题title

//main.js中的代码
router.beforeEach((to,from,next)=>{
    if(to.meta.title){
        document.title=to.meta.title
    }
    next()
})

4.3、 配置组件是否需要缓存

<!-- app.vue中的代码 -->
<!-- 需要被缓存的路由入口 -->
<keep-alive>  
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 不需要被缓存的路由入口 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

未完待续 …