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

前言

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

一、静态标题

1.1 路由守卫中设置

• ❗ 注意 ：

  • 可以在 全局前置守卫 或者 全局后置守卫 中设置；

• 代码展示：

  // 导入vue-router
  // 实例化路由
  // ...
  
  // 路由前置守卫
  router.beforeEach((to, from) => {
    document.title = '想要设置的标题';
  });
  
  // 全局后置守卫
  router.afterEach((to, from) => {
    documnet.title = '想要设置的标题';
  });

说明：

• 在这两个钩子函数中设置标题本质上没有太大区别；
• 唯一的区别就在于：
  • 前置守卫 ：
    • 先看到标题，再看到页面；
  • 后置守卫 ：
    • 先看到页面，再看到标题；
• 在一个页面跳转到另一个页面的时候，跳转之前会 对路由进行解析 ，加载异步组件 ，这是一个 耗时 的过程。如果受到网速的影响，页面加载的速度可能有点慢，大家可以根据这点选择在哪个守卫函数中设置标题；

1.2 给Webpack增添配置项设置

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

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

2. 设置标题：

   • 在项目的根目录下添加.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 项目；

1. 安装插件

   • npm i vue-wechat-title --save；

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

   import Vue from 'vue';
   import VueWechatTitle from 'vue-wechat-title';
   
   Vue.use(VueWechatTitle);

3. 给路由添加 meta 属性：

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

4. 设置标题：

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

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

说明：

• 如果遇到不能生效的情况，请大家自行百度一下哈；
• 这个插件我没使用过😂😂😂；
• 抱歉哈；

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

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

二、动态标题

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

1. 给路由添加meta属性;

   import type { RouteRecordRaw } from 'vue-router';
   // 举例
   const routes: RouteRecordRaw[] = [
   // ...
   
   {
      path: '/home',
      component: () => import('@/views/Home.index.vue'),
      meta: { title: '首页' }
   },
   
   // ...
   ]

2. 在全局守卫中设置标题：

   // 导入vue-router
   // 实例化路由
   // ...
   
   // 路由前置守卫
   router.beforeEach((to, from) => {
     document.title = to?.meat.title || '默认标题';
   });
   
   // 全局后置守卫
   router.afterEach((to, from) => {
     documnet.title = to?.meat.title || '默认标题';
   });

说明：

• 在这两个钩子函数中设置标题本质上没有太大区别；
• 唯一的区别就在于：
  • 前置守卫 ：
    • 先看到标题，再看到页面；
  • 后置守卫 ：
    • 先看到页面，再看到标题；
• 在一个页面跳转到另一个页面的时候，跳转之前会 对路由进行解析 ，加载异步组件 ，这是一个 耗时 的过程。如果受到网速的影响，页面加载的速度可能有点慢，大家可以根据这点选择在哪个守卫函数中设置标题；