路由元信息实现App的动态标题

使用 VueRouter 提供的路由元信息，可以轻松实现App标题的动态变化，如下图：

再说下实现思路：

1. 定义路由的时候，配置上 meta 字段

const router = createRouter({
  routes: [
    {
      ...
      children: [
        {
          path: '/home',
          name: 'home',
          component: () => import('@/views/home/index.vue'),
          meta: { title: '首页' }
        },
        {
          path: '/article',
          name: 'article',
          component: () => import('@/views/article/index.vue'),
          meta: { title: '健康百科' }
        },
        {
          path: '/notify',
          name: 'notify',
          component: () => import('@/views/notify/index.vue'),
          meta: { title: '消息中心' }
        },
        {
          path: '/user',
          name: 'user',
          component: () => import('@/views/user/index.vue'),
          meta: { title: '个人中心' }
        }
      ]
    }
  ]
})

2. 在全局后置导航守卫中，实现切换路由设置标题

在 TypeScript 环境下会出现报错

# 全局后置导航守卫
router.afterEach((to) => {
  # 报错: 不能将类型“unknown”分配给类型“string”
  document.title = to.meta.title
})

3. 官文给到了我们解决TS报错的方式，扩展 RouteMeta 接口来输入 meta 字段

# src / types 文件夹下 / 新建 vue-router.d.ts 类型声明文件
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    // 可选的
    title?: string
  }
}

4. 出现新的报错信息

扩展 RouteMeta 接口时，我们设置了可选参数，那 to.meta.title 的确可能为 undefined

这里不考虑设置必选参数，除非你想设置 Route 下的所有接口类型！

router.afterEach((to) => {
  # 不能将类型“string | undefined”分配给类型“string”
  document.title = to.meta.title
})

解决新的报错：

router.afterEach((to) => {
  document.title = to.meta.title || '缺省标题'
})

搞定！

End-----------------------------

路由元信息实现App的动态标题

猜你喜欢