vue router设置不同页面title

可以通过在路由配置中设置meta字段来实现不同页面的title。

例如，定义一个路由：

{
  path: '/home',
  name: 'home',
  component: Home,
  meta: {
    title: '首页'
  }
},

在该路由的meta字段中设置title为'首页'。

然后在应用程序的主组件中，监听路由变化，动态修改文档标题：

import { mapGetters } from 'vuex'
import { setTitle } from '@/utils/dom'

export default {
  computed: {
    ...mapGetters(['currentRoute'])
  },
  watch: {
    currentRoute () {
      this.updateTitle()
    }
  },
  mounted () {
    this.updateTitle()
  },
  methods: {
    updateTitle () {
      const pageTitle = this.currentRoute.meta.title || '默认标题'
      setTitle(pageTitle)
    }
  }
}

在上面的代码中，我们使用了一个工具函数`setTitle`来修改文档标题，该函数实现如下：

export function setTitle (title) {
  document.title = title
}

这样，每当路由切换时，就会根据当前路由的meta字段中的title属性来动态修改文档标题。