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>