Question

路由元信息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, form, next) => {
      document.title = to.meta.title;
    next()
})

使用TS扩展

如果不使用扩展，meta属性中的值将会是unknow 类型

在main.ts中设置

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