const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
meta原信息是一個(gè)可以給路由記錄攜帶一個(gè)對(duì)象的字段（字段名只能為meta，其他的設(shè)置了也沒(méi)用），你可以在這個(gè)字段里存一些信息，例如該路由地址是否需要身份驗(yàn)證、該地址是否需要導(dǎo)航欄等。
獲取方式如下：
this.$route.meta
vue-router官方例子如下，是一個(gè)根據(jù)meta判斷該路徑是否需要驗(yàn)證登錄人的過(guò)程。
注意：在導(dǎo)航守衛(wèi)中的路由對(duì)象中，meta是在matched數(shù)組中的，并不能直接獲取到。文章來(lái)源：http://www.zghlxwxcb.cn/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() // 確保一定要調(diào)用 next()
}
})
使用注意事項(xiàng)：我們可以通過(guò)this.$route.meta.requiresAuth = false直接對(duì)meta進(jìn)行修改，并且跳到其他路由地址，該路由地址上的meta也不會(huì)恢復(fù)最初的結(jié)果，而是保留修改后的數(shù)據(jù)，但是不能刷新，如果在任意地址刷新了頁(yè)面，則meta會(huì)恢復(fù)最初的樣子。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-640081.html
到了這里，關(guān)于vue-router 路由元信息meta的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![Uncaught Error: [vue-router] “path“ is required in a route configuration 的解決方案](https://imgs.yssmx.com/Uploads/2024/02/689648-1.png)
