vue路由路径参数matched介绍

责编:menVScode 2017-12-13 13:20 阅读(1160)


router.beforeEach(function(to,from,next){
  console.log(to)
  next()
})

打印结果

Object {
    fullPath:"/Project", //完整路劲
hash:"", //hash值 matched:Array(2), //包含当前路由的所有嵌套路劲片段的路由记录。比如子路由可以得到父路由的信息 meta:Object, //路由元信息,在路由配置中meta可以配置一些数据,用在路由信息对象中,使用$route.meta访问meta中的数据 name:undefined,//当前路由的名字 params:{},//包含动态路由参数 path:"/Project",//对应当前路由的路劲
query:Object,//URL查询参数 }

        matched是一个数组对象,数组第二项是匹配到当前的路由信息,数组第一项是当前的路由的父路由信息。

        当访问一个子路由的时候,不仅把子路由的路由信息存在matched中,而且把其父路由信息也存在matched里。

matched:Array(2)
  0:Object
    beforeEnter:undefined
    components:Object
    instances:Object
    matchAs:undefined
    meta:Object
    name:"Management"
    parent:undefined
    path:"/management"
    props:Object
    redirect:undefined
    regex:/^\/management(?:\/(?=$))?$/i
    __proto__:Object
  1:Object
    beforeEnter:undefined
    components:Object
    instances:Object
    matchAs:undefined
    meta:Object
    name:"Project"
    parent:Object
    path:"/project"
    props:Object
    redirect:undefined
    regex:/^\/project(?:\/(?=$))?$/i
    __proto__:Object
  length:2
  __proto__:Array(0)

        登入逻辑代码片段

router.beforeEach(function(to,from,next){
  //console.log(to)
  //console.log(to.matched.some( (item) => item.meta.login ) )
  if(to.matched.some( (item) => item.meta.login )){
    // console.log(this) // this不是根模块的实例
    // router实例有app属性,代表根实例
    let info = router.app.$local.fetch('userInfo').login
    if(info){
      next()
    }else{
      next('/login')
      // router.push({path:'/login'})
    }
  }else{
    next()
  }
})

        数组方法 some() 介绍:判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
    return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
    return x < 1;
}); 
console.log(arr3); // false
标签: matched 路由 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码