vue自定义指令--实现每个页面title不同，且可以动态修改

1、main.js中定义全局指令：v-myTitle

Vue.directive('myTitle', {
  inserted: function (el, binding) {
    const { value } = binding
    // 方式1，直接给v-myTitle标签的 data-title 属性赋值
    if (el.dataset.title) { 
      document.title = el.dataset.title
    } 
    // 方式2，通过指令传参（{{xxx}}）
    else if (value && value.title) { 
      document.title = value.title
    }
  },
  update (el, binding) {
    const { value } = binding
    if (el.dataset.title) {
      document.title = el.dataset.title
    } else if (value && value.title) {
      document.title = value.title
    }
  }
})

2、在各个vue页面中，使用v-myTitle配置页面title

方式一：直接给v-myTitle标签的 data-title 属性赋值

<template>
<div v-myTitle :data-title="textTitle">
	// 页面代码块
</div>
</template>
<script>
export default {
  name: 'Login',
  data () {
      textTitle: '自定义标题001'
    }
  }
}
</script>

方式2，通过指令传参（{{xxx}}）

<template>
<div v-myTitle="{title:textTitle}">
	// 页面代码块
</div>
</template>
<script>
export default {
  name: 'Login',
  data () {
      textTitle: '自定义标题001'
    }
  }
}
</script>

只要在需要变化title的Vue页面中使用自定义的指令，就可以实现不同页面的标题变化，而且可以进行动态修改，实测有效~