使用vue-router时，动态更改title

You can use a navigation guard with the router definition:

import Vue from 'vue';

const DEFAULT_TITLE = 'Some Default Title';
router.afterEach((to, from) => {
    // Use next tick to handle router history correctly
    // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609
    Vue.nextTick(() => {
        document.title = to.meta.title || DEFAULT_TITLE;
    });
});

import Vue from 'vue';

const DEFAULT_TITLE = 'Some Default Title';

router.afterEach((to, from) => {

// Use next tick to handle router history correctly

// see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609

Vue.nextTick(() => {

document.title = to.meta.title || DEFAULT_TITLE;

});

Or you can use an immediate watcher on your root component:

export default {
  name: 'App',
  watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        document.title = to.meta.title || 'Some Default Title'
      }
    }
  }
}

export default {

name: 'App',

watch: {

$route: {

immediate: true,

handler(to, from) {

document.title = to.meta.title || 'Some Default Title'

}

动态更改页面title：

watch: {
  title: {
    immediate: true,
    handler() {
      document.title = title
    }
  }
}

watch: {

title: {

immediate: true,

handler() {

document.title = title

}

参考文章：

How to change page titles when using vue-router?