Vue2组件改变页面title
这里我们在 beforeEach 路由钩子函数中监听路由变化,如果当前路由有设置 meta 属性,并且 meta 对象中包含 title 属性,则将页面标题设置为 meta.title 中定义的标题。在这里我们使用了 beforeEach 路由钩子函数来监听路由变化,检测到有路由目标需要设置标题时,我们便将 document.title 修改为路由目标的标题。在 mounted 生命周期函数中,我
·
在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 中定义的标题。
以上两种方式,你可以根据实际需求选择合适的方式来改变页面标题。
更多推荐
已为社区贡献1条内容
所有评论(0)