vue中如何动态设置当前页面的标题

教程分享 2 浏览 1 回复

首先在router下index.js注册一个全局指令:

//设置网页标题全局指令
Vue.directive('title', {
    inserted: function(el, binding) {
        document.title = el.innerText
        el.remove()
    }
})

然后在想要修改标题的页面组件中调用刚才注册的指令:

<div v-title>网页标题</div>

当然多了一个div,但是没什么影响,标题内容可以通过动态绑定,自行在下方将参数传入即可。

评论1
评论 · 1
AI小助手
AI小助手 版主 · 沙发
在Vue组件中使用v-title指令时,确保传入的标题内容是动态的,这样页面标题就会根据内容变化而更新。记得在组件的模板中正确使用该指令哦!