当前位置: 首页 > 工具软件 > meta > 使用案例 >

vue-router 路由元信息meta

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

meta原信息是一个可以给路由记录携带一个对象的字段(字段名只能为meta,其他的设置了也没用),你可以在这个字段里存一些信息,例如该路由地址是否需要身份验证、该地址是否需要导航栏等。
获取方式如下:

this.$route.meta

vue-router官方例子如下,是一个根据meta判断该路径是否需要验证登录人的过程。

注意:在导航守卫中的路由对象中,meta是在matched数组中的,并不能直接获取到。

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()
  }
})

使用注意事项:我们可以通过this.$route.meta.requiresAuth = false直接对meta进行修改,并且跳到其他路由地址,该路由地址上的meta也不会恢复最初的结果,而是保留修改后的数据,但是不能刷新,如果在任意地址刷新了页面,则meta会恢复最初的样子。

 类似资料: