vue项目中自定义页面标题

https://blog.csdn.net/weixin_42321819/article/details/116521572?utm_term=vue%E5%8A%A8%E6%80%81%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%E6%A0%87%E9%A2%98&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-2-116521572&spm=3001.4430
Vue.js实现动态修改页面的标题

以上是一个网友的实现方案，但我发现不适用我的情况

我需要动态改变每一个页面的标题，包括类似新闻详情页，商品详情页等

以下为我实现的方法

main.js中添加以下代码

Vue.directive('title', {//单个修改标题
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

然后直接在想要的页面中单独设置标题

<div class="process_detail-page" v-title data-title="待办测试也"></div>