Vue.js 使用 vuerouter 时如何更改页面标题

import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate';
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VeeValidate);
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills,
      meta: { title: 'Skills - MyApp' } // <- I would to use this one
    },
    {
      path: '/about/:name',  // Add /:name here
      name: 'about',
      component: About,
      meta: { title: 'About - MyApp' }
    }
  ]
})

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;
    });
});

const router = new Router({ ... });
...
export default router;

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

Vue.js相关问答推荐

Vuetify 3 改变 Select 的 colored颜色

Vuetify 扩展面板，面板标题左侧带有图标

Rails Webpacker 还是 Vue-CLI？

Webpack - MiniCssExtractPlugin 不提取文件

VueJS中的绑定函数含义

Nuxt.js 中的开发工具样式编辑问题

如何从我的 Vuetify 数据表中正确更新 Vuex 状态

Vue.js 中 Chrome 和 Datalist 的性能问题

在 v-for 循环中使用 v-model

从 vue.js 中的 store 获得的计算(computed)属性的设置器

如何将事件绑定到 Vuetify 中的树视图 node ？

简单的点击功能不触发

了解 Nuxt.js 中的State状态和Getters：Getters不起作用

Vue Chart.js - 条形图上的简单点/线

Vuetify 数据表不显示数据

VueJS 2 在多个组件上debounce

$set 不是函数

如何使用 Vue Test utils 测试输入是否聚焦？

如何在 Vue 数据对象中运行函数？

如何删除 vue cli 2？