vue - 根据vue-router的meta动态设置html里title标签内容

1、路由文件 ：router/index.js 添加meta属性配置：

import Vue from 'vue'import Router from 'vue-router'import index '@/view/index'import user from '@/view/user'Vue.use(Router)export default new Router({routes: [{path: '/index',name: 'index',component: index,meta:{title:'首页'}},{path: '/user',name: 'user',component: user,meta:{title:'个人中心'}}]})

2、在入口文件 main.js中添加router.beforeEach 配置以下代码

1 import Vue from 'vue'2 import App from './App'3 import router from './router'4 router.beforeEach((to, from, next) => {5if (to.meta.title) {6 document.title = to.meta.title7}8next()9 })10 new Vue({11el: '#app',12router,13template: '<App/>',14components: {App}15 })