Vue设置document.title浏览器标题名字处理方案-CFANZ编程社区

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

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

配置路由文件中 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'

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

非常蠢笨 - 不建议用

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

方案三：使用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>

好了，到此结束。常规的就这几种，优先路由守卫

0 条评论