场景需求
在使用Vue开发的单页面应用中想实现网页的title根据页面的不同或者点开文章的不同动态改变titile为我们自定义内容或者是文章的标题。
最终实现效果
首页
点击文章时
以上为三个页面的展示,其他页面同样可以根据自己的需要自定义不同的内容。
Vue自定义指令
在Vue中除了可以使用Vue自带的指令也可以自定义指令来实现对DOM的底层操作。详细使用文档请参考Vue官方文档。
实现方法
这里演示的是以Vue-cli脚手架搭建的项目等使用过程。在main.js中添加如下代码:
//改变标题方法
function changeTitle(el,binding){
const {value} = binding;
if(el.dataset.title){
document.title = el.dataset.title;
}else if(value&&value.title){
document.title = value.title;
}
}
Vue.directive('blog-title',{
inserted: function(el,binding){
changeTitle(el,binding);
},
update: function(el,binding,vnode,oldNode){
changeTitle(el,binding);
}
})
- inserted:被绑定元素插入父节点时调用
- update:所在组件等VNode更新时调用,但是可能发生在其子VNode更新之前。指令的值可能发生了改变,也可能没有发生改变。我们可以通过比较更新前后的值来忽略不必要的模版更新。
这里我在inserted
和update
俩个函数中都执行了改变标题的操作,执行逻辑一致,所以把它抽成一个改变标题的方法。
使用自定义指令
上面我们定义了blog-title
这个自定义标题,它对应的指令是v-blog-title
,当然你可以定义的时候就定义成v-blog-title
。根据我们方法中定义的使用方式有俩种方式:
- 使用
data-title
来定义网页标题。 - 使用
v-blog-title="标题"
这种给指令传值的方式。
使用时在模版的第一个div下插入如下的代码
<div v-blog-title :data-title="title"></div>
这里的title就是博文的标题。其他页面同样只需要嵌入上面这一行代码,然后更改data-title
的值或者改变v-blog-title
的值就可以实现动态的改变标题了。
演示网址: https://www.huhailong.vip