vue-router组件动态设置title页面标题

页面标签由<title></title> 标签来控制，但是在不同的页面要显示必须通过JavaScript来修改<title></title>。
window.document.title ="首页" // 纯js修改

更好的方法是：我们利用vue-router组件的导航钩子beforEach’函数，在路由发生变化时，统一设置

import VueRouter from 'vue-router';
...

//加载 vue-router 插件
Vue.use(VueRouter);

/*定义路由匹配表*/
const Routers = [{
    path: '/index',
    component: (resolve) => require(['./router/views/index.vue'], resolve),
    meta: {
        title: '首页'
    }
},
    //一次性加载
    // {
    //     path: '/index',
    //     component: require('./router/views/index.vue')
    // },
    {
        path: '/about',
        component: (resolve) => require(['./router/views/about.vue'], resolve),
        meta: {
            title: '关于'
        }
    }
]

我们在路由匹配表中，为那些需要标题的页面，配置了 meta title 属性：

meta: {
        title: 'xxx'
}

然后在 beforeEach 导航钩子函数中，从路由对象中获取 meta title 属性，用于标题设置。beforeEach 有三个入参：
参数说明

to 当前导航，即将要进入的路由对象。
from 当前导航，即将要离开的路由对象。
next 调用 next() 之后，才会进入下一步。