美文网首页
vue中的路由元信息(meta)

vue中的路由元信息(meta)

作者: 大号火龙果 | 来源:发表于2019-10-23 13:10 被阅读0次

    一、官方文档

          路由元信息:定义路由的时候可以配置 meta 字段
    
    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          children: [
            {
              path: 'bar',
              component: Bar,
              // a meta field
              meta: { requiresAuth: true }
            }
          ]
        }
      ]
    })
    

    那么如何访问这个字段meta 呢?

    首先,我们称呼routers 配置中的每个路由对象为 路由记录。路由记录可以使嵌套的(多层嵌套路由),因此,当一个路由匹配成功后,他可能匹配多个路由记录。

    解析:

    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 + 1; } //ES5
          (i) => i + 1 //ES6
      ```
    

    3、this route requires auth, check if logged in ,说明auth信息是必须的,检验是否登录,也就是在这个路由下,如果检测到auth这个用户名,那么进行下一步操作!

    4、案例下面就有了判断,if (!auth.loggedIn()),通过自己封装的检验方法auth.loggedIn(),检验用户是否登录,从而决定渲染下一步操作!

    总结,vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可!其实比较简单,大家可以研究下。

    相关文章

      网友评论

          本文标题:vue中的路由元信息(meta)

          本文链接:https://www.haomeiwen.com/subject/drymyctx.html