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

您所在的位置：网站首页 › 网页标题在哪里设置 › Vue设置document.title浏览器标题名字处理方案

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

2024-03-29 04:41| 来源: 网络整理| 查看: 265

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 也能改造的。

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

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

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

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

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

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

非常蠢笨 - 不建议用

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

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

【本文地址】

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

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

今日新闻

推荐新闻