Vue设置document.title浏览器标题名字处理方案
Vue单页面,设置下根据路由变化,自动显示对应页面名字。配置路由文件中 meta.titleimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: () => import('../views/Home
·
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='这是页面名';
},
.
好了,到此结束。常规的就这几种,有问题留言。
更多推荐
已为社区贡献13条内容
所有评论(0)