一、官方文檔
路由元信息:定義路由的時(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)單,大家可以研究下。