动态修改vue组件页面title的方案

全局路由钩子

// ...
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

指令

import Vue from 'vue'
// Document title
Vue.directive('title', {
  inserted: (el, binding) => {
    document.title = binding.value
  },
  update: (el, binding) => {
    document.title = binding.value
  }
})
// 在router-view上添加
<router-view class="full-page native-scroll"
  v-title="$route.meta.title" />

如果你有更好的方案请分享下~