Vue路由元信息、頁面跳轉、驗證登錄時，path與meta有何不同？

在做網站登錄驗證的時候，使用到beforeEach 鉤子函數進行驗證操作，如下面代碼 ，如果頁面路徑 path爲/goodsList，那麼就讓它跳轉到登錄頁面，實現了驗證登錄。

如果需要登錄驗證的網頁很多，怎麼辦？

1.這裏是對比path。

如果需要驗證的網頁很多，那麼必須在 if 條件裏得寫下所有的路由地址，非常麻煩。
2.因爲路由是可以嵌套的。

有 ‘/goodsList’，那麼可能會有子路由children（/online）,也就是’/goodsList/online’，再或者還有’/goodsList/offline’、’/goodsList/audit’、’/goodsList/online/edit’等等。

像剛纔例子中對比 if 條件 to.path === ‘/goodsList’，非常單一，其他的路徑壓根不會限制（驗證）到，照樣能正常登陸！因爲每個to.path不一樣。

我們所希望的是把 ‘/goodsList’ 限制了，其他所有的以’/goodsList’開頭的那些頁面也都限制！就像大廳的門口，攔住大廳門口出入，想進入一室二室三室的門就不行了。

我們已經學習Router實例和route對象的區別，其中route對象的屬性主要有：

matched是我們關注的重點，它是一個數組，數組可能是多個路由記錄：

它的第一項就是 {path: “/goodslist”}，（上圖是一個demo，path不同，只是方便閱覽）一直到最爲具體的當前path （例如：{path: “/goodslist/online/edit”}）。

這裏可以循環matched這個數組，看每一項的path 有沒有等於/goodsList,只要其中一個有，那麼就讓它跳轉到登錄狀態

那麼這裏只是對goodsList進行驗證判斷，且限制的還是path，如果頁面中還有會員列表、資訊列表、廣告列表都需要進行驗證的時候，用path來做限制似乎有點不好用。

3. meta字段（元數據）
直接在路由配置的時候，給每個路由添加一個自定義的meta對象，在meta對象中可以設置一些狀態，來進行一些操作。用它來做登錄校驗再合適不過了：

這裏我們只需要判斷item下面的meta對象中的login_require是不是true，就可以做一些限制了

也就是path侷限性比較大，對它①自己，它的②子路由，③孫子路由 等等

可以攔截’/singer’, 可以攔截’/singer’/yy ， 可以攔截 ‘/singer’/yy/xxx。根據yy和xxx的變化可能還有很多種，這是對路徑 path 驗證。這是單一頁面，所有變化都在’/singer’及內部；

而 meta比較自由，根據 自定義的 屬性去判斷就可以了：

path: ‘/singer’,和path: ‘/rank’,是不同路徑path，OK是自定義的，並且meta也可以嵌套children當中，(上圖沒有書寫)。

4.meta其他的妙用
4.1 配置組件是否需要緩存

{
    path:"/test",
    name:"test",
    component:()=>import("@/components/test"),
    meta:{
        title:"測試頁面", //配置title
        keepAlive: true //是否緩存
    }
}

4.2、配置此路由的標題title

//main.js中的代碼
router.beforeEach((to,from,next)=>{
    if(to.meta.title){
        document.title=to.meta.title
    }
    next()
})

4.3、 配置組件是否需要緩存

<!-- app.vue中的代碼 -->
<!-- 需要被緩存的路由入口 -->
<keep-alive>  
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 不需要被緩存的路由入口 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

未完待續 …