Vue學習筆記之路由元資訊

2021-10-02 05:46:52 字數 611 閱讀 1872

定義路由的時候可以配置meta字段:

const router = new vuerouter(}]

}]})

那麼如何訪問這個meta欄位呢?

首先,我們稱呼routes配置中的每個路由物件為路由記錄。路由記錄可以是巢狀的,因此,當乙個路由匹配成功後,他可能匹配多個路由記錄

例如,根據上面的路由配置,/foo/bar這個 url 將會匹配父路由記錄以及子路由記錄。

乙個路由匹配到的所有路由記錄會暴露為$route物件 (還有在導航守衛中的路由物件) 的$route.matched陣列。因此,我們需要遍歷$route.matched來檢查路由記錄中的meta字段。

下面例子展示在全域性導航守衛中檢查元欄位:

router.beforeeach((to, from, next) => 

})} else

} else

})

vue 路由元資訊

meta meta後跟乙個物件 固定的 requiresauth 自定義 我們去自定義一段資訊來去匹配對應的功能,比如驗證登入 使用者中心 了才能檢視.我們給使用者中心路由加上這個標識,加了之後就需要驗證是否是登入狀態,如果是登入狀態我們才能正常檢視這個頁面 定義路由的時候可以配置meta字段 通過...

vue學習之路由

路由需要引入庫 vue router 我們經常需要把某種模式匹配到的所有路由,全都對映到同個元件。例如,我們有乙個 user 元件,對於所有 id 各不相同的使用者,都要使用這個元件來渲染。那麼,我們可以在 vue router 的路由路徑中使用 動態路徑引數 dynamic segment 來達到...

vue學習總結之路由

一 新增依賴,在package.json中找到dependencies模組,然後往裡面追加jquery,以jq版本2.2.3為例 dependencies 然後命令列 npm install 二 新增完依賴後,修改webpack配置,找到webpack.base.conf.js,引入 var web...