vue 动态设置页面title

在这里我们介绍3种方法

1.通过自定义指令去修改（单个修改比较好）

1.在main.js 页面里添加自定义指令//
Vue.directive('title', {//单个修改标题
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})
2.在需要修改的页面里添加v-title 指令
"我是新的标题">
.复制代码

2.使用插件vue-wechat-title

1.安装插件
npm vue-wechat-title --save
2.在main.js里面引入插件
import VueWechatTitle from 'vue-wechat-title'//动态修改title
Vue.use(VueWechatTitle)
3.在路由里面 添加title
         routes: [{
			path: '/login',
			component: Login,
			meta: {
				title: '登录'
			}
		}, {
			path: '/home',
			component: Home,
			meta: {
				title: '首页'
			}
		},]

4.在app.vue 中添加 指令 v-wechat-title
'$route.meta.title' />
复制代码

3.通过router.beforeEach导航守卫来修改

1.在router的index里写自己的路径和title
const router = new Router({
	routes: [{
			path: '/login',
			component: Login,
			meta: {
				title: '登录'
			}
		}, {
			path: '/home',
			component: Home,
			meta: {
				title: '首页'
			}
		},	
	]

})
2.使用router.beforeEach对路由进行遍历，设置title
router.beforeEach((to, from, next) => {//beforeEach是router的钩子函数，在进入路由前执行
  if (to.meta.title) {//判断是否有标题
	console.log(to.meta.title)
    document.title = to.meta.title
  }
  next()
})
复制代码

转载于:https://juejin.im/post/5d355c3f6fb9a07eb15d9383