在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 中定义的标题。

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

Logo

前往低代码交流专区

更多推荐