Vue中通过自定义指令实现动态改变网页标题

场景需求

在使用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。根据我们方法中定义的使用方式有俩种方式：

1. 使用data-title来定义网页标题。
2. 使用v-blog-title="标题"这种给指令传值的方式。
   使用时在模版的第一个div下插入如下的代码

<div v-blog-title :data-title="title"></div>

这里的title就是博文的标题。其他页面同样只需要嵌入上面这一行代码，然后更改data-title的值或者改变v-blog-title的值就可以实现动态的改变标题了。
演示网址: https://www.huhailong.vip