前言

• 给页面动态设置标题的方法有很多：
  • 在Vue2可中，我们可以在vue.config.js中给webPack添加相应的配置项，实现动态标题；
  • 也可以在路由规则数组中给meta对象添加属性（一般都是title属性😂）进行动态设置；
  • 也可以使用插件进行设置；
  • 在Vue3中，也可以在路由守卫中进行页面标题的设置，但是如果使用TS的话，需要给路由对象的meta对象添加类型；
  • 下面就来说说在 Vue3 + TS 中给页面设置标题，以及给 meta 对象添加类型吧；

一、给 meta 对象 添加类型

• Vue-Router - 路由元信息；
• 可以通过扩展 RouteMeta 接口来输入 meta 字段;
• 目标文件：
  • src/types/vue-router.d.ts；

  import 'vue-router';
  
  declare module 'vue-router' {
      interface RouteMeta {
          // 在这里添加需要的类型
          // 有些页面是没有标题的，所以 title 是可选参数
          title?: string;
      }
  }
  

二、给页面动态设置标题

• 目标文件：
  • src/router/index.ts
  • 如果是在别的文件，需要将 router 先导入，再使用；

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        //...
        {
            path: '/home',
            component: () => import('xxx'),
            meta: {
                title: '首页'
            }
        }
        // ...
    ]
});

// 路由前置守卫
router.beforeEach((to, from) => { document.title = to?.meta?.title || '默认标题'; });

// 全局后置守卫
router.afterEach((to, from) => { documnet.title = to?.meta?.title || '默认标题'; });

三、给页面设置静态标题

• 目标文件：
  • src/router/index.ts
  • 如果是在别的文件，需要将 router 先导入，再使用；

// 路由前置守卫
router.beforeEach((to, from) => { document.title = '想要设置的标题'; });

// 全局后置守卫
router.afterEach((to, from) => { documnet.title = '想要设置的标题'; });