1、通过全局前置守卫beforeEach
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: { title: '首页' }
}
]
})
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title || '首页'
}
next()
})
复制代码
2、插件 第一步安装:
npm install vue-wechat-title --save
复制代码
第二步引入插件: 项目入口文件main.js引入并使用
import VuewechatTitle from 'vue-wechat-title'
Vus.use(VuewechatTitle)
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title || '首页'
}
next()
})
复制代码
第三步设置使用title: 在你需要改变的页面 第一个div 上加上v-wechat-title="this.title", title 是下面再 data 里面定义的数据.
<template>
<div v-wechat-title="this.title">
</template>
export default {
data(){
return {
title: '首页'
}
}
}
复制代码
两种方法,看项目具体情况吧。希望点赞来!!!
所有评论(0)