vue-router路由元信息meta

更新日期: 2019-02-27阅读: 3.2k标签: meta

1. 前言: 

在全局守卫beforeEach((to,from,next) => {...})中判断当前路由是否允许登录、是否需要身份认证、权限认证等,虽然可以采用路由匹配的方式 if(to.path === '/url'),很显然当需要验证的路由较多时,会增加太多的if判断,这不利于代码维护,此时可在定义路由的时候可以配置 meta 字段,通过设置一些属性值,可以便于我们对当前的路由做一些处理,也可以使用next()重定向到其他路由。 


2. 使用

在定义路由时定义一个需要验证的meta信息 meta: {requiresAuth: true} 路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录,例如,根据下面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录

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


一个路由匹配到的所有路由记录会暴露为 $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()
  }
})


配置组件是否需要缓存

<!-- app.vue中的代码 -->
<!-- 需要被缓存的路由入口 -->
<keep-alive>  
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 不需要被缓存的路由入口 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

链接: https://www.fly63.com/article/detial/2141

meta中viewport介绍,关于移动web前端viewport详解

当你掌握了viewport,那么意味着你已经大致了解了移动平台与PC平台的不同,你可以更专注而细致的去解决某些平台差异问题。

Meta标签大全_web开发常用meta整理

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

meta中X-UA-Compatible的作用详解

X-UA-Compatible是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式,对于ie8之外的浏览器是不识别的。目前绝大多数网站都用<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >来作为IE8的兼容方法。为了避免制作出的页面在IE8下面出现错误,

HTML5中meta标签的属性有哪些?

meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。还是有必要了解一些meta的属性,并且能够熟练使用它们。

html头部中各式各样的meta

在写网页的过程中,第一步就是创建一个html文档。meta 元素可以提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键字。它不会显示在页面上,但是计算机可以识别

作为前端,你必须要知道的 meta 标签知识

面试baidu的时候,面试官问:你都知道什么 meta 标签?用处是什么?尽可能多的说出来。我:嗯…… 嗯…… 我一般都自动生成… 面试官:……后来找资料好好学了下

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!