vue中的路由元信息(meta)

一、官方文檔

      路由元信息:定義路由的時(shí)候可以配置 meta 字段
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何訪問這個(gè)字段meta 呢?

首先,我們稱呼routers 配置中的每個(gè)路由對(duì)象為 路由記錄。路由記錄可以使嵌套的(多層嵌套路由),因此,當(dāng)一個(gè)路由匹配成功后,他可能匹配多個(gè)路由記錄。

解析:

1、meta 字段就是路由元信息字段,requiresAuth 是自己起的字段名稱,用來標(biāo)記這個(gè)路由信息是否需要檢測(cè),true 表示要檢測(cè),false 表示不需要檢測(cè)(這個(gè)名稱隨便起,比如我自己的就起的 requiresId,建議起個(gè)有意義的名稱)

2、if (to.matched.some(record => record.meta.requiresAuth) ),如果對(duì)這類寫法不熟悉,可以去看看es6的箭頭函數(shù),這句話就是返回遍歷的某個(gè)路由對(duì)象,我們定義為為record,檢測(cè)這個(gè)對(duì)象是否擁有meta這個(gè)對(duì)象,如果有meta這個(gè)對(duì)象,檢測(cè)它的meta對(duì)象是不是有requiresAuth這個(gè)屬性,且為true,如果滿足上述條件,就確定了是這個(gè)/foo/bar路由。

  ```
      function(i){ return i + 1; } //ES5
      (i) => i + 1 //ES6
  ```

3、this route requires auth, check if logged in ,說明auth信息是必須的,檢驗(yàn)是否登錄,也就是在這個(gè)路由下,如果檢測(cè)到auth這個(gè)用戶名,那么進(jìn)行下一步操作!

4、案例下面就有了判斷,if (!auth.loggedIn()),通過自己封裝的檢驗(yàn)方法auth.loggedIn(),檢驗(yàn)用戶是否登錄,從而決定渲染下一步操作!

總結(jié),vue-router路由元信息說白了就是通過meta對(duì)象中的一些屬性來判斷當(dāng)前路由是否需要進(jìn)一步處理,如果需要處理,按照自己想要的效果進(jìn)行處理即可!其實(shí)比較簡(jiǎn)單,大家可以研究下。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 國(guó)家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說閱讀 12,448評(píng)論 6 13
  • 網(wǎng)絡(luò)層提供的兩種服務(wù) 在計(jì)算機(jī)網(wǎng)絡(luò)領(lǐng)域,網(wǎng)絡(luò)層應(yīng)該向運(yùn)輸層提供怎樣的服務(wù)(面向連接還是無連接)曾引起了長(zhǎng)期的爭(zhēng)論,...
    srtianxia閱讀 4,241評(píng)論 0 12
  • 路由元信息?(黑人問號(hào)臉???)是不是這么官方的解釋很多人都會(huì)一臉懵?那么我們說meta,是不是很多人恍然大悟,因...
    有夢(mèng)想的咸魚前端閱讀 682評(píng)論 0 6
  • 導(dǎo)航守衛(wèi) 導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。 參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。 1、全...
    SailingBytes閱讀 1,229評(píng)論 1 3
  • 今天中午室友提議說燉排骨,好久沒有吃肉的我當(dāng)然沒有意見。 蔥姜蒜,豆角土豆加排骨,我給室友打下手。 等一切都準(zhǔn)備好...
    三荷說閱讀 274評(píng)論 0 0

友情鏈接更多精彩內(nèi)容