const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
meta原信息是一个可以给路由记录携带一个对象的字段（字段名只能为meta，其他的设置了也没用），你可以在这个字段里存一些信息，例如该路由地址是否需要身份验证、该地址是否需要导航栏等。
获取方式如下：
this.$route.meta
vue-router官方例子如下，是一个根据meta判断该路径是否需要验证登录人的过程。
注意：在导航守卫中的路由对象中，meta是在matched数组中的，并不能直接获取到。文章来源：https://www.toymoban.com/news/detail-640081.html
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
使用注意事项：我们可以通过this.$route.meta.requiresAuth = false直接对meta进行修改，并且跳到其他路由地址，该路由地址上的meta也不会恢复最初的结果，而是保留修改后的数据，但是不能刷新，如果在任意地址刷新了页面，则meta会恢复最初的样子。文章来源地址https://www.toymoban.com/news/detail-640081.html
到了这里，关于vue-router 路由元信息meta的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![Uncaught Error: [vue-router] “path“ is required in a route configuration 的解决方案](https://imgs.yssmx.com/Uploads/2024/02/689648-1.png)
