Vue2组件改变页面title

在vue组件中，我们可以通过以下两种方式改变网页标题：

一、mounted 生命周期函数

export default { 
	mounted(){ 
	 document.title = '新的标题'
	} 
}

在 mounted 生命周期函数中，我们调用了 document.title 来修改页面标题。当该组件被挂载后，页面的标题就会变成 “新的标题”。

二、路由钩子函数

另外，你也可以在路由钩子函数中统一配置网页标题，在每次页面跳转时都会更新标题，代码如下：

router.beforeEach((to, from, next) => { // 判断路由是否需要设置标题
	if (to.meta.title) {
	   document.title = to.meta.title
	}
    next() 
})

在这里我们使用了 beforeEach 路由钩子函数来监听路由变化，检测到有路由目标需要设置标题时，我们便将 document.title 修改为路由目标的标题。注意要在路由跳转前设置标题。

建议你将这段代码放在 main.js 中或者是单独写一个 title.js 文件，在main.js中引入，来统一处理每个路由的标题。

例如，在main.js中添加如下代码：

import router from './router'

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

这里我们在 beforeEach 路由钩子函数中监听路由变化，如果当前路由有设置 meta 属性，并且 meta 对象中包含 title 属性，则将页面标题设置为 meta.title 中定义的标题。

以上两种方式，你可以根据实际需求选择合适的方式来改变页面标题。