vue2项目为每一个路由页面设置不同的title的2种方式

vue2项目中的路由页面，希望可以为每个页面设置不同的标题（title），就是显示在浏览器或微信中的标题。

总结以下的2种方式：

• 方式1，router/index.js 中增加如下代码：

import Vue from 'vue';

const DEFAULT_TITLE = '这是个默认的标题';
router.beforeEach((to, from) => {
    Vue.nextTick(() => {
        document.title = to.meta.title || DEFAULT_TITLE;
    });
});

定义路由的时候，增加meta：

{
    path: '/some_path',
    name: 'SomeName',
    component: () => import('@/views/SomeName.vue'),
    meta: {title: '这个页面特定的标题'}
},

• 方式2，直接在vue页面中：

export default {
    name: 'SomeName',
    watch: {
        $route: {
            immediate: true,
            handler(to, from) {
                document.title = '这个页面特定的标题';
            }
        },
    }
};