【转】vue路由元信息（meta）是什么

【转】vue路由元信息（meta）是什么————————————————
为什么会有路由元信息这个东西？
我们在做⽹站登录验证的时候，可以使⽤到beforeEach 钩⼦函数进⾏验证操作，如下⾯代码，如果页⾯path为’/goodsList’，那么就让它跳转到登录页⾯，实现了验证登录。

router.beforeEach((to, from, next) => {
if (to.path === '/goodsList') {
next('/login')
} else
next()
})
如果需要登录验证的⽹页多了怎么办？
1.这⾥是对⽐path。

如果需要验证的⽹页很多，那么在if条件⾥得写下所有的路由地址，将会是⾮常⿇烦的⼀件事情。

2.因为路由是可以嵌套的。

有’/goodsList’，那么可能会有’/goodsList/online’，再或者还有’/goodsList/offline’、’/goodsList/audit’、
’/goodsList/online/edit’等等。

如果像刚才例⼦中这样对⽐（to.path === ‘/goodsList’），就⾮常单⼀，其他的路径压根不会限制（验证）到，照样能正常登陆！因为每个to.path根本不⼀样。

我们所理想的就是把’/goodsList’限制了，其他所有的以’/goodsList’开头的那些页⾯都给限制到！
to Route: 即将要进⼊的⽬标路由对象我们打印⼀下to
它有很多属性，有
- fullPath
- hash
- matched
- meta
- name
- params
- path
- query
其中有个属性，matched，就是匹配了的路由，我们打印出来，这个是个数组。

它的第⼀项就是{path: “/goodslist”}，⼀直到最为具体的当前path （例如：{path: “/goodslist/online/edit”}）
这⾥可以循环matched这个数组，看每⼀项的path 有没有等于’/goodsList’,只要其中⼀个有，那么就让它跳转到登录状态
router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.path == '/goodslist'
})) {
next('/login')
} else
next()
})
那么这⾥只是对goodsList进⾏验证判断，且限制的还是path，如果页⾯中还有会员列表、资讯列表、⼴告列表都需要进⾏验证的时候，⽤path来做限制似乎有点不好⽤。

轮到主⾓登场了
meta字段（元数据）
直接在路由配置的时候，给每个路由添加⼀个⾃定义的meta对象，在meta对象中可以设置⼀些状态，来进⾏⼀些操作。

⽤它来做登录校验再合适不过了
{
path: '/actile',
name: 'Actile',
component: Actile,
meta: {
login_require: false
},
},
{
path: '/goodslist',
name: 'goodslist',
component: Goodslist,
meta: {
login_require: true
},
children:[
{
path: 'online',
component: GoodslistOnline
}
]
}
这⾥我们只需要判断item下⾯的meta对象中的login_require是不是true，就可以做⼀些限制了router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.meta.login_require
})) {
next('/login')
} else
next()
})。