vue-router中關(guān)于meta的作用及說明
更新時間：2023年05月17日 16:38:13 作者：青顏的天空
這篇文章主要介紹了vue-router中關(guān)于meta的作用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-router中meta的作用
meta的定義：
簡單來說就是路由元信息，也就是每個路由身上攜帶的信息。
meta的作用：
vue-router路由元信息說白了就是通過meta對象中的一些屬性來判斷當前路由是否需要進一步處理，如果需要處理，按照自己想要的效果進行處理即可
定義路由的時候可以配置 meta 字段：
const router = new VueRouter({
? routes: [
? ? {
? ? ? path: '/foo',
? ? ? component: Foo,
? ? ? children: [
? ? ? ? {
? ? ? ? ? path: 'bar',
? ? ? ? ? component: Bar,
? ? ? ? ? // a meta field
? ? ? ? ? meta: { requiresAuth: true }
? ? ? ? }
? ? ? ]
? ? }
? ]
})那么如何訪問這個 meta 字段呢？
首先，我們稱呼 routes 配置中的每個路由對象為 路由記錄。路由記錄可以是嵌套的，因此，當一個路由匹配成功后，他可能匹配多個路由記錄
例如，根據(jù)上面的路由配置，/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄。
一個路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導航守衛(wèi)中的路由對象) 的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。
下面例子展示在全局導航守衛(wèi)中檢查元字段：
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-router中元信息meta的妙用
{
? ? path:"/test",
? ? name:"test",
? ? component:()=>import("@/components/test"),
? ? meta:{
? ? ? ? title:"測試頁面", //配置title
? ? ? ? keepAlive: true //是否緩存
? ? }
}配置此路由的標題title
//main.js中的代碼
router.beforeEach((to,from,next)=>{
? ? if(to.meta.title){
? ? ? ? document.title=to.meta.title
? ? }
? ? next()
})配置組件是否需要緩存
<!-- app.vue中的代碼 --> <!-- 需要被緩存的路由入口 --> <keep-alive> ? ? ? <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不需要被緩存的路由入口 --> <router-view v-if="!$route.meta.keepAlive"></router-view>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3項目實現(xiàn)前端導出Excel的示例,在vue3的項目中導出Excel表格的功能,可以借助xlsx庫來實現(xiàn),下面是詳細的操作步驟,需要的朋友可以參考下2025-01-01
vue項目使用modbus實現(xiàn)串口通訊的示例代碼
本文主要介紹了vue項目使用modbus實現(xiàn)串口通訊的示例代碼,可以實現(xiàn)與Modbus設備的數(shù)據(jù)交互,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-02-02
利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
最近公司項目中頻繁會使用到table表格,而且前端技術(shù)這一塊也用到了vue3來開發(fā),所以基于element plus table做了一個二次封裝的組件,這篇文章主要給大家介紹了關(guān)于利用Vue3+Element?Plus封裝公共表格組件的相關(guān)資料,需要的朋友可以參考下2023-11-11
今天小編就為大家分享一篇VUE單頁面切換動畫代碼(全網(wǎng)最好的切換效果)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
輪播圖是前端很常用的一個網(wǎng)頁特效，幾乎所有的網(wǎng)站或多或少都會用到這個特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實現(xiàn)移動端圖片輪播組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-08-08
在Web開發(fā)中,跨域問題是一大挑戰(zhàn),跨域是指網(wǎng)絡請求從一個域名發(fā)起,而請求的目標資源位于另一個不同的域名下,通常使用Vue CLI的代理來解決跨域問題,而在生產(chǎn)環(huán)境中,可以通過后端配置CORS或使用Nginx反向代理,或者通過服務器中轉(zhuǎn)來解決跨域問題2023-10-10
這篇文章主要介紹了vue自動路由-單頁面項目（非build時構(gòu)建）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue自定義Form組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決
這篇文章主要介紹了vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08