Vue设置document.title浏览器标题名字处理方案

Vue单页面，设置下根据路由变化，自动显示对应页面名字。

• 方案一：使用路由守卫 router.beforeEach、router.afterEach
• 方案二：在App.vue使用watch监听路由变化
• 方案三：在App.vue使用组件传值来更新
• 方案四：使用vue-wechat-title插件
• 方案五：每个组件页面的钩子函数：created 或 mouted中处理（太蠢，不建议）

配置路由文件中 meta.title

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: { title: '首页' }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: { title: '关于' }
  }
]

const router = new VueRouter({
  mode: 'history', // history模式需要服务器配置（找运维或后端配置可开）
  base: process.env.BASE_URL,
  routes
})

export default router

.

方案一：路由守卫 router.beforeEach、router.afterEach

1.新建 路由守卫管理文件

src / router / handle.js (目录自己找个地方放）

import router from './index';

// beforeEach、afterEach二选一
// router.beforeEach((to, from, next) => {
//   document.title = to.meta?.title || '默认页面名';
//   next(); // 必须要，否则不执行跳转
// })

// beforeEach、afterEach二选一
router.afterEach((to, from, next) => {
  document.title = to.meta?.title;
})

2.main.js中引用

引用到 对应路由守卫文件就行，不必保持一致

// 引用路由守卫
import './router/handle'

.

方案二：在App.vue使用watch监听路由变化

对，你没看错，App.vue 也能改造的。

<script>
export default {
  watch: {
    $route(to, from) {
      document.title = to.meta?.title || '默认页面名';
    },
  },
};
</script>

.

方案三：在App.vue使用组件传值来更新

testKey、testVal 自己随意起名字。代码仅是案例

<template>
  <div id="app">
    <router-view :testKey="testVal" />
  </div>
</template>

<script>
export default {
  computed: {
    testVal(){
      document.title = this.$route.meta?.title || '默认页面名';
      return Math.random() * 1e18;
    }
  }
};
</script>

.

方案四：使用vue-wechat-title插件

1.安装：

//安装命令
npm install --save vue-wechat-title
或
yarn add vue-wechat-title

2.main.js中引用

Vue.use(require('vue-wechat-title'))

3.优化多次渲染（非必须）

src / App.vue中：

<template>
  <div id="app">
    <!-- 原先 <router-view/> -->
    <router-view v-wechat-title='$route.meta.title'/>
  </div>
</template>

方案五：每个组件页面的钩子函数：created 或 mouted中处理

非常蠢笨 - 不建议用

created() {
    document.title='这是页面名';  
 },

.

好了，到此结束。常规的就这几种，有问题留言。