方法一：使用vue-wechat-title插件设置

第一步：安装插件

npm vue-wechat-title --save

第二步：在main.js全局引入、使用插件

import VueWechatTitle from 'vue-wechat-title' //动态修改title
Vue.use(VueWechatTitle);

第三步：在通过路由的mate属性携带title

const routes = [{
        path: '/login',
        component: () =>
            import ('@/views/login'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '/404',
        component: () =>
            import ('@/views/404'),
        meta: {
            title: '错误'
        }
    }]

第四步：在App.vue里面使用插件

<div id="app">
    <router-view v-wechat-title="$route.meta.title" />
  </div>

这样就ok啦，第一种方法是不是很简单

方法二：通过路由导航守卫设置

第一步：跟第一种方法一样，设置mate的title属性

const routes = [{
        path: '/login',
        component: () =>
            import ('@/views/login'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '/404',
        component: () =>
            import ('@/views/404'),
        meta: {
            title: '错误'
        }
    }]

第二步：在路由前置守卫中

router.beforeEach(async(to, form, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = '9527' //此处写默认的title
    }
  	.....
  	//接下来写正常的路由守卫就可以了
})

这个方法全部在路由里面操作就可以了，好像比第一种更简单哦

方法三：单个修改title（不推荐动态标题使用，推荐统一标题或者单个标题使用）

第一步：在main.js 页面里添加自定义指令

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

第二步：在需要修改的页面里添加v-title 指令

<div v-title data-title="我是标题"></div>

说明一下，方法三在App.vue里面使用v-title，则整个项目的标题都将一样，如果想单个页面使用某个标题，在单个页面使用v-title。