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>