Vue 之 改变 或 动态改变 title 插件 vue-wechat-title

第一种：固定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