数据可视化大屏 项目开发时，一些客户比较抓细节，今天的细节是标题，客户要求页面跳转后，标题也跟着变化，vue项目属于单页项目，我们需要根据路由跳转进行标题动态修改，因为是pc端，不用考虑手机上面标题修改的兼容性。我们只需要修改document.title的值就可以了。

添加路由导航守卫

添加路由导航守卫，在路由跳转前获取标题，并将页面的标题修改为新的标题。

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next()
})

完整路由代码

添加一个meta字段，将标题放入meta下，然后通过路由守卫获取到meta下的字段，修改标题内容。

import {createRouter, createWebHashHistory} from 'vue-router'

const routerHistory = createWebHashHistory();
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            title: '数据资产大屏',
            redirect: '/homepage',
            meta: {
                title: '数据资产大屏',
            }
        },
        {
            path: '/homepage',
            title: '数据资产大屏',
            component: () => import('../view/homepage/index.vue'),
            meta: {
                title: '数据资产大屏',
            }
        },
        {
            path: '/datarunstatus',
            title: '数据运行状态大屏',
            component: () => import('../view/datarunstatus/index.vue'),
            meta: {
                title: '数据运行状态大屏',
            }
        },
    ]
})
router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next()
})
export default router