一、官方文檔
路由元信息：定義路由的時候可以配置 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)) {
//不熟悉some函數(shù)用法的, 要百度搜索下,這里的意思是, 循環(huán)執(zhí)行數(shù)組中的每一條信息, 只要有一個是 返回 true, 那么結(jié)果就是true
// 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() }
})js中some的用法:
解析：
1、meta 字段就是路由元信息字段，requiresAuth 是自己起的字段名稱，用來標記這個路由信息是否需要檢測，true 表示要檢測，false 表示不需要檢測（這個名稱隨便起，比如我自己的就起的 requiresId，建議起個有意義的名稱）
2、if (to.matched.some(record => record.meta.requiresAuth) )，如果對這類寫法不熟悉，可以去看看es6的箭頭函數(shù)，這句話就是返回遍歷的某個路由對象，我們定義為為record，檢測這個對象是否擁有meta這個對象，如果有meta這個對象，檢測它的meta對象是不是有requiresAuth這個屬性，且為true，如果滿足上述條件，就確定了是這個/foo/bar路由。
function(i){ return i + 1; } //ES5(i) => i + 1 //ES6 3、this route requires auth, check if logged in ，說明auth信息是必須的，檢驗是否登錄，也就是在這個路由下，如果檢測到auth這個用戶名，那么進行下一步操作！
4、案例下面就有了判斷，if (!auth.loggedIn())，通過自己封裝的檢驗方法auth.loggedIn()，檢驗用戶是否登錄，從而決定渲染下一步操作！
總結(jié)，vue-router路由元信息說白了就是通過meta對象中的一些屬性來判斷當前路由是否需要進一步處理，如果需要處理，按照自己想要的效果進行處理即可！其實比較簡單，大家可以研究下。
5、我項目中實例
router.beforeEach((to, from ,next) => {
const token = store.getters.userInfo
if(to.matched.some(record => record.meta.requireAuth)){
next()//如果路由中有meta的requireAuth，且為true，就不進行登錄驗證，否則進行登錄驗證
}
else{
if(token){
next()
}else{
if(to.path==="/login"){
next()
}else{
next({path:'/login'})
}
}
}
return}
)
