第一种:固定title
1.先给路由设置 title;
{
path: "/dingwei",
name: "dingwei",
beforeEnter: area,
component: dingwei,
meta: {
title: "喜欢房" //title
}
},
2.main.js 文件中写:
// 根据路由设置标题// 路由发生改变修改页面的title
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title;
}
window.scrollTo(0, 0); // 跳转到新页面 页面滚动到顶部;
next();
});
第二种:动态修改title
有的文章标题就是这个页的title;
1.安装插件:
cnpm install vue-wechat-title --save
2.main.js 中配置;
//设置title
import VueWechatTitle from "vue-wechat-title";
Vue.use(VueWechatTitle);
// 根据路由设置标题// 路由发生改变修改页面的title
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title;
}
window.scrollTo(0, 0);
next();
});
3.在需要动态改变title的页面的第一个div 上加上:v-wechat-title=“this.title”
<div class="newhouseinfo" v-wechat-title="this.title">
<!-- ... -->
</div>
data(){
return{
title:'',
}
},
created() {
this.article();
},
methods: {
article(){
this.title = '文章标题'
}
}
借鉴文章:https://blog.csdn.net/Tomwildboar/article/details/82767000