路由元信息 | Vue Router (vuejs.org) (opens new window)

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。

笔记

通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据，例如：

• 权限校验标识。
• 路由组件的过渡名称。
• 路由组件持久化缓存 (keep-alive) 的相关配置。
• 标题名称

我们可以在导航守卫或者是路由对象中访问路由的元信息数据。

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta: {
        title: "登录"
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta: {
        title: "首页",
      }
    }
  ]
})

通过导航守卫访问

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    
    // 如果白名单有或者缓存有token，则可进去
    if (whiteList.includes(to.path) || localStorage.getItem('token')) {
        next()
    } else {
        next('/')
    }
})

TypeScript

可以通过扩展 RouteMeta 接口来输入 meta 字段（如果不使用扩展 将会是unknow类型）

declare module 'vue-router' {
  interface RouteMeta {
    title?: string
  }
}