一、官方文档
路由元信息：定义路由的时候可以配置 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()
}
})
解析：
1、meta 字段就是路由元信息字段，requiresAuth 是自己起的字段名称，用来标记这个路由信息是否需要检测，true 表示要检测，false 表示不需要检测（这个名称随便起，比如我自己的就起的 requiresId，建议起个有意义的名称）
2、if (to.matched.some(record => record.meta.requiresAuth) )，如果对这类写法不熟悉，可以去看看es6的箭头函数，这句话就是返回遍历的某个路由对象，我们定义为为record，检测这个对象是否拥有meta这个对象，如果有meta这个对象，检测它的meta对象是不是有requiresAuth这个属性，且为true，如果满足上述条件，就确定了是这个/foo/bar路由。
function(i){ return i + ; } //ES5
(i) => i + //ES6
3、this route requires auth, check if logged in ，说明auth信息是必须的，检验是否登录，也就是在这个路由下，如果检测到auth这个用户名，那么进行下一步操作！
4、案例下面就有了判断，if (!auth.loggedIn())，通过自己封装的检验方法auth.loggedIn()，检验用户是否登录，从而决定渲染下一步操作！
总结，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
})
//系统模块
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
})
二、Array some() 方法
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素，则返回false。
注意： 1、some() 不会对空数组进行检测。 2、some() 不会改变原始数组。
1、语法：array.some(function(currentValue,index,arr),thisValue)
2、参数说明：
function(currentValue, index,arr)：必须。函数，数组中的每个元素都会执行这个函数
函数参数：
currentValue：必选。当前元素的值
index：可选。当前元素的索引值
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"
3、返回值：布尔值。如果数组中有元素满足条件返回 true，否则返回 false。
4、检测数组 ages 中是否有元素大于输入框输入的值：
<p>最小年龄: <input type="number" id="ageToCheck" value=""></p>
<button onclick="myFunction()">点我</button>
<p>判断结果: <span id="demo"></span></p>
<script>
var ages = [, , , ];
function checkAdult(age) {
return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
</script>