Vue路由對象屬性 .meta $route.matched詳解
$route.fullPath
1 路由是：/path/:type真正路徑是：/path/list
2 path匹配路徑: /path/list
3 fullPath匹配路由: /path/:type
路由元信息 .meta
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true ,keepAlive:true}//1.權(quán)限 2.內(nèi)存緩存，單頁面切換
}
]
}
]
})
先理解什么是路由記錄 ： 路由記錄就是 routes 配置數(shù)組中的對象副本 (還有在 children 數(shù)組)。
上方代碼中的路由記錄見下方：
//一級路由
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true ,keepAlive:true}//1.權(quán)限 2.內(nèi)存緩存，單頁面切換
}
]
}
//一級路由的子路由
{ path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }
//兩者都是 路由記錄
1 定義路由的時(shí)候可以配置 meta 字段
2 根據(jù)上面的路由配置，/foo/bar 這個(gè) URL 將會匹配父路由記錄以及子路由記錄
3 一個(gè)路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導(dǎo)航守衛(wèi)中的路由對象) 的 $route.matched 數(shù)組。
4 檢查路由記錄中的 meta 字段 ，我們需要遍歷 $route.matched
$route.matched
1 一個(gè)數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的路由記錄
2 一個(gè)路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導(dǎo)航守衛(wèi)中的路由對象) 的 $route.matched 數(shù)組
路由元信息 .meta $route.matched 搭配路由守衛(wèi) 進(jìn)行驗(yàn)證
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()
}
})
以上這篇Vue路由對象屬性 .meta $route.matched詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請求
這篇文章主要介紹了vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請求，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中組件的過渡動畫，并通過實(shí)例代碼給大家介紹了過渡動畫的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
詳解vue-cli 構(gòu)建項(xiàng)目 vue-cli請求后臺接口 vue-cli使用axios、sass、swiper
本文通過實(shí)例代碼給大家詳細(xì)介紹了vue-cli 構(gòu)建項(xiàng)目 vue-cli請求后臺接口 vue-cli使用axios、sass、swiper的相關(guān)知識,需要的朋友可以參考下2018-05-05
淺析vue-cli3配置webpack-bundle-analyzer插件【推薦】
小編最近為了優(yōu)化vue項(xiàng)目性能，需要使用webpack-bundle-analyzer插件來分析報(bào)文件，在網(wǎng)上沒有找到合適的，下面小編給大家寫出來一個(gè)供大家參考2019-10-10
今天小編就為大家分享一篇關(guān)于vue中輪訓(xùn)器的使用，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue.js實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)選項(xiàng)卡切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue實(shí)現(xiàn)原理this.$message實(shí)例詳解
這篇文章主要介紹了vue實(shí)現(xiàn)原理this.$message實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在本篇文章里小編給各位整理的是一篇關(guān)于Vue引入Stylus知識點(diǎn)總結(jié)內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2020-01-01
Vue3?使用Element?Plus表格單選帶checkbox功能
這篇文章主要介紹了Vue3?使用Element?Plus表格單選帶checkbox,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-11-11