要实现在切换到不同路由时，网页标题显示为对应路由的标题，你需要在 Vue Router 中配置导航守卫 (Navigation Guards) 来动态修改页面标题。在你的代码中已经有了路由配置，现在我们需要在这个基础上添加导航守卫。

下面是如何实现的步骤：

1. 安装 Vue Router（如果你还没有安装的话）：

在终端中执行以下命令：

npm install vue-router

2. 导入并配置导航守卫：

打开你的路由文件，通常是 router.js，然后按照下面的方式修改：

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

const routerHistory = createWebHashHistory();
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/demo/videoScreenShot',
            name: 'videoScreenShot',
            component: () => import('../view/demo/videoScreenShot/index.vue'),
            meta: {
                title: '视频截图',
            }
        },
        {
            path: '/demo/switchtab',
            name: 'switchtab',
            component: () => import('../view/demo/switchtab/index.vue'),
            meta: {
                title: 'tab切换',
            }
        },
        {
            path: '/demo/particles',
            name:'particles',
            component: () => import('../view/demo/particles/index.vue'),
            meta: {
                title: 'particles粒子特效实例',
            }
        },
    ]
})
// 添加导航守卫
router.beforeEach((to, from, next) => {
    if (to.meta && to.meta.title) {
        document.title = to.meta.title;
    }
    next();
});

export default router

在上述代码中，我们在路由配置中为每个路由添加了一个 title 属性。然后，我们使用 beforeEach 导航守卫，在每次路由切换之前检查目标路由是否有 title 属性，并将其设置为页面标题。

请注意，我还为每个路由添加了 name 属性，这是为了方便在导航守卫中使用。你可以在需要的地方根据实际情况来使用 name 或其他标识符来设置页面标题。

这样，当你切换到不同的路由时，页面标题就会根据路由配置动态地进行更新。

项目应用

智慧园区可视化大屏