vue-router路由元信息詳解

1、官方文檔

　　路由元信息：定義路由的時候能夠配置 meta 字段

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field
          meta: { requiresAuth: true } } ] } ] })

　　那麼如何訪問這個 meta 字段呢？

　　首先，咱們稱呼 routes 配置中的每一個路由對象爲 路由記錄。路由記錄能夠是嵌套的，所以，當一個路由匹配成功後，他可能匹配多個路由記錄。

　　例如，根據上面的路由配置，/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄。

　　一個路由匹配到的全部路由記錄會暴露爲 $route 對象（還有在導航守衛中的路由對象）的 $route.matched 數組。所以，咱們須要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

　　下面例子展現在全局導航守衛中檢查元字段：

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() // 確保必定要調用 next()
 } })

　　解析：

　　一、meta 字段就是路由元信息字段，requiresAuth 是本身起的字段名稱，用來標記這個路由信息是否須要檢測，true 表示要檢測，false 表示不須要檢測（這個名稱隨便起，好比我本身的就起的 requiresId，建議起個有意義的名稱）

　　二、if (to.matched.some(record => record.meta.requiresAuth) )，若是對這類寫法不熟悉，能夠去看看es6的箭頭函數，這句話就是返回遍歷的某個路由對象，咱們定義爲爲record，檢測這個對象是否擁有meta這個對象，若是有meta這個對象，檢測它的meta對象是否是有requiresAuth這個屬性，且爲true，若是知足上述條件，就肯定了是這個/foo/bar路由。

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

　　三、this route requires auth, check if logged in ，說明auth信息是必須的，檢驗是否登陸，也就是在這個路由下，若是檢測到auth這個用戶名，那麼進行下一步操做！

　　四、案例下面就有了判斷，if (!auth.loggedIn())，經過本身封裝的檢驗方法auth.loggedIn()，檢驗用戶是否登陸，從而決定渲染下一步操做！

　　總結，vue-router路由元信息說白了就是經過meta對象中的一些屬性來判斷當前路由是否須要進一步處理，若是須要處理，按照本身想要的效果進行處理便可！其實比較簡單，你們能夠研究下。

　　五、我項目中實例

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 })

//系統模塊
export default [ { path: '/login', name: 'login', component:() => import('@/views/system/login') }, { path:'/register', name:'register', component:() => import('@/views/system/register'), meta:{requireAuth:true} }, { path:'/perfectInfo/:identifier', name:'perfectInfo', component:() => import('@/views/system/perfectInfo'), meta:{requireAuth:true} }, { path:'/resetPassword', name:'resetPassword', component:() => import('@/views/system/resetPassword'), meta:{requireAuth:true} } ]

　　項目中使用：經過路由元信息meta實現不一樣路由展示不一樣頁面（帶不一樣的meta信息，展現不一樣頁面佈局）

<template>
  <el-container :class="['app uf-col']"> <template v-if="$route.meta.fullScreen"> <router-view></router-view> </template> <template v-else-if="$route.meta.homePages"> <Nav></Nav> <router-view></router-view> </template> <template v-else> <WHeader></WHeader> <el-container> <WMenu></WMenu> <router-view></router-view> </el-container> </template> </el-container> </template>

//系統模塊 export default [ { path: '/login', name: 'login', component:() => import('@/views/system/login'), meta:{fullScreen:true} }, { path:'/register', name:'register', component:() => import('@/views/system/register'), meta:{requireAuth:true,fullScreen:true} }, //靜態主頁模塊 export default [ { path:'/rescue', name:'rescue', component:() => import('@/views/pages/rescue'), meta:{homePages:true} } ]

　　而後咱們再看下路由導航守衛，加上homePages：若是路由元信息裏面requireAuth爲true，或者homePages爲true，都不攔截

router.beforeEach((to, from ,next) => { const token = store.getters.userInfo if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){ next() }else{ if(token){ next() }else{ if(to.path==="/login"){ next() }else{ next({path:'/login'}) } } } return })

2、Array some() 方法

　　some() 方法用於檢測數組中的元素是否知足指定條件（函數提供）。

　　some() 方法會依次執行數組的每一個元素：

• 若是有一個元素知足條件，則表達式返回true , 剩餘的元素不會再執行檢測。
• 若是沒有知足條件的元素，則返回false。

　　注意： 一、some() 不會對空數組進行檢測。 二、some() 不會改變原始數組。

一、語法：array.some(function(currentValue,index,arr),thisValue)

二、參數說明：

　　function(currentValue, index,arr)：必須。函數，數組中的每一個元素都會執行這個函數

　　　　函數參數：

　　　　　　currentValue：必選。當前元素的值

　　　　　　index：可選。當前元素的索引值

　　　　　　arr：可選。當前元素屬於的數組對象

　　thisValue：可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue ，"this" 的值爲 "undefined"

三、返回值：布爾值。若是數組中有元素知足條件返回 true，不然返回 false。

四、檢測數組 ages 中是否有元素大於輸入框輸入的值：

<p>最小年齡: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">點我</button>
<p>判斷結果: <span id="demo"></span></p>
<script>
var ages = [4, 12, 16, 20]; function checkAdult(age) { return age >= document.getElementById("ageToCheck").value; } function myFunction() { document.getElementById("demo").innerHTML = ages.some(checkAdult); } </script>