vue动态该变title

分类

• 页面title固定值
• 页面title动态获取，类似于博客文章标题

固定title

//rooter.js
{
	path: '/',
	name: 'xxx',
	component: () => import('./components/xxx.vue'),
	meta: {
		title: 'xxx'   //设置标题
	}
},

路由守卫中设置改变标题

router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    from.name ? next({ name: from.name }) : next({ path: 'error' })
  } else {
  // 判断路由中是否存在title
    if (to.meta.title) {
      document.title = to.meta.title
    } else {
      document.title = 'xxx'
    }
    next()
  }
})

动态改变title

安装

npm install vue-wechat-title --save

引入main.js

import VueWechatTitle from 'vue-wechat-title'

Vue.use(VueWechatTitle)

配置路由守卫

router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    from.name ? next({ name: from.name }) : next({ path: 'error' })
  } else {
  // 判断路由中是否存在title
    if (to.meta.title) {
      document.title = to.meta.title
    } else {
      document.title = 'xxx'
    }
    next()
  }
})

页面使用

//页面开始标签加入指令
<template>
    <div v-wechat-title="title">
      //内容
	</div>
</template>

//配置title
<script>
export default {
  name: 'ArticleInfo',
  data () {
    return {
      title: '测试', 
       }
  },
  created () {
    this.title = '改变后的标题'
  },
}
</script>