一般来说vue单页面应用的title在index.html中设置,但是一旦设置就是唯一了,对此有了以下需求:
需要实现不同的页面对应不同的title,
特别是微信公众号时,有了自带的头部栏,在vue2.0中可以使用vue-wechat-title解决问题

1,安装vue-wechat-title

npm install vue-wechat-title --save

2,路由配置里加title,添加meta字段设置title

	{
      path: '/user',
      component: User,
      name: 'User',
      meta:{
        title:'个人中心'
      }
    },

3,在main.js中添加下面代码

	import VueWechatTitle from 'vue-wechat-title';
	Vue.use(VueWechatTitle);


	router.beforeEach((to, from, next) => {
			if(to.meta.title){
			  window.document.title = to.meta.title
			} else {
		 next()
		}
	})

4,在app.vue中修改代码

<template>
  <div id="app">
    <router-view  v-wechat-title="$route.meta.title"/>
  </div>
</template>

5,遇到传递参数的情况时,可以在页面中这样设置

在总的div里面设置title

<template>
  <div class="container" v-wechat-title="this.b_title">
  </div>
</template>

在created钩子中

created() {
    this.b_title = this.$route.query.orderName;
  },

这样就达到效果了

Logo

前往低代码交流专区

更多推荐