Vue Router Meta 是 Vue Router 中的一個功能，它可以在路由配置中添加 meta 屬性，以便更好地管理頁面的元信息。meta 屬性可以用于存儲頁面標(biāo)題、描述、關(guān)鍵字等信息，還可以用于控制頁面的訪問權(quán)限、頁面的緩存設(shè)置等。Vue Router Meta 提供了許多靈活的選項，使開發(fā)人員能夠輕松地管理網(wǎng)站的元信息，并對頁面進行更精細(xì)的控制。

const routes = [
{
path: '/home',
name: 'home',
component: Home,
meta: {
title: '首頁'
}
},
{
path: '/about',
name: 'about',
component: About,
meta: {
title: '關(guān)于我們'
}
}
]

在路由配置中，我們可以為每個路由配置一個 meta 對象，該對象包含我們需要定義的所有元信息。在上面的代碼示例中，我們?yōu)椤笆醉摗焙汀瓣P(guān)于我們”路由定義了 title 屬性。該屬性可以用于設(shè)置瀏覽器標(biāo)題欄中的網(wǎng)頁標(biāo)題。

除了 title 屬性外，meta 對象還可以具有其他屬性，如 description 和 keywords，它們用于存儲頁面的文本描述和查詢關(guān)鍵字，以便搜索引擎更好地了解網(wǎng)站內(nèi)容。此外，我們還可以使用 router.beforeEach() 鉤子函數(shù)來控制頁面的訪問權(quán)限，例如檢查用戶是否已登錄。

router.beforeEach((to, from, next) =>{
const loggedIn = localStorage.getItem('user')
if (to.matched.some(record =>record.meta.requiresAuth) && !loggedIn) {
next('/login')
}
next()
})

在上面的代碼示例中，我們使用 router.beforeEach() 鉤子函數(shù)來檢查用戶是否已登錄。如果用戶未登錄且訪問的頁面需要驗證身份，則將其重定向到登錄頁面。

除了控制訪問權(quán)限外，我們還可以使用 meta 屬性來控制頁面的緩存設(shè)置。例如，如果我們希望路由頁面始終從服務(wù)器加載而不從緩存中加載，則可以在 meta 中添加一個 noCache 屬性。這將防止瀏覽器緩存頁面內(nèi)容，從而確保始終獲取最新版本的頁面。

const routes = [
{
path: '/home',
name: 'home',
component: Home,
meta: {
title: '首頁',
noCache: true
}
},
{
path: '/about',
name: 'about',
component: About,
meta: {
title: '關(guān)于我們',
noCache: true
}
}
]

在上面的代碼示例中，我們?yōu)椤笆醉摗焙汀瓣P(guān)于我們”路由添加了 noCache 屬性，以確保瀏覽器始終從服務(wù)器加載最新的頁面內(nèi)容。

總之，Vue Router Meta 提供了許多有用的工具來管理網(wǎng)站的元信息。通過在路由配置中使用 meta 屬性，我們可以輕松地設(shè)置網(wǎng)頁標(biāo)題、描述和關(guān)鍵字，控制頁面的訪問權(quán)限，以及控制頁面的緩存設(shè)置。這些工具可以幫助我們更好地管理網(wǎng)站內(nèi)容，并為用戶提供更好的用戶體驗。