前言

在我们做项目的时候，这肯定是要给项目设置网页标题的，这里设置就分为两种：
- 静态网页标题：
  - 整个项目从始至终就使用一个标题，不随着路径（路由）的变化而变化；
- 动态网页标题：
  - 不同的页面有不同的标题，随着路径（路由）的切换，页面标题需要发生变化；
下面就来说说，我目前知道的几种设置页面标题的方案吧；
- 后续遇到了别的方式也会补充上的

一、静态标题

1.1 路由守卫中设置

❗ 注意：
- 可以在 全局前置守卫 或者 全局后置守卫 中设置；

代码展示：

// 导入vue-router
// 实例化路由
// ...

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

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

说明：

在这两个钩子函数中设置标题本质上没有太大区别；

唯一的区别就在于：

前置守卫：

先看到标题，再看到页面；

后置守卫：

先看到页面，再看到标题；

在一个页面跳转到另一个页面的时候，跳转之前会 对路由进行解析，加载异步组件，这是一个耗时的过程。如果受到网速的影响，页面加载的速度可能有点慢，大家可以根据这点选择在哪个守卫函数中设置标题；

1.2 给Webpack增添配置项设置

修改 index.html中<title>标签内容：

<title>
  <%= webpackConfig.name %>
</title>

设置标题：

在项目的根目录下添加.env文件；

VUE_APP_TITLE = '天翼云办公工作台'

配置Webpack：

目标文件：
- vue.config.js；

const { VUE_APP_TITLE } = process.env;
const name = VUE_APP_TITLE || '默认标题';

module.exports = {
  // ...

  configureWebpack: { name }

  // ...
};

1.3 使用插件

适用于 Vue2 项目；

安装插件
- npm i vue-wechat-title --save；

在 main.js 中导入并 注册插件：

import Vue from 'vue';
import VueWechatTitle from 'vue-wechat-title';

Vue.use(VueWechatTitle);

给路由添加 meta 属性：

// 举例
const routes = [
// ...

 {
    path: '/home',
    component: () => import('@/views/Home.index.vue'),
    meta: { title: '首页' }
 },
 
 // ...
]

设置标题：

<router-view v-mechat-title="$router.meta.title" />

设置完成后，重启项目即可；

说明：

如果遇到不能生效的情况，请大家自行百度一下哈；

这个插件我没使用过😂😂😂；

抱歉哈；

1.4 ❌ 修改`index.html`中`title`标签的内容

了解即可；
Vue2 项目：
- 我们可以首手动修改index.html中<title>标签的内容；
- 文件所在位置：项目/public/index.html；
Vue3 项目：
- 也是可以直接修改index.html中<title>标签的内容；
- 文件位置：项目/index.html；

二、动态标题

动态标题：
- 随着页面的变化，网页的标题也会变化；
要想实现动态标题，就必须借助于路由守卫；
❗ 注意：
- 可以在 全局前置守卫 或者 全局后置守卫 中设置；

给路由添加meta属性;

import type { RouteRecordRaw } from 'vue-router';
// 举例
const routes: RouteRecordRaw[] = [
// ...

{
   path: '/home',
   component: () => import('@/views/Home.index.vue'),
   meta: { title: '首页' }
},

// ...
]

在全局守卫中设置标题：

// 导入vue-router
// 实例化路由
// ...

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

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

说明：

在这两个钩子函数中设置标题本质上没有太大区别；

唯一的区别就在于：

前置守卫：

先看到标题，再看到页面；

后置守卫：

先看到页面，再看到标题；

在一个页面跳转到另一个页面的时候，跳转之前会 对路由进行解析，加载异步组件，这是一个耗时的过程。如果受到网速的影响，页面加载的速度可能有点慢，大家可以根据这点选择在哪个守卫函数中设置标题；

前端开发小技巧 - 【Vue】 - 给页面设置 动态标题 和 静态标题

前言

一、静态标题

1.1 路由守卫中设置

1.2 给Webpack增添配置项设置

1.3 使用插件

1.4 ❌ 修改index.html中title标签的内容

二、动态标题

前端开发小技巧 - 【Vue】 - 给页面设置动态标题和静态标题

1.4 ❌ 修改`index.html`中`title`标签的内容