记一次多个路由加载同一个组件

最近遇到一个需求，要求比较简单，把ppt的内容展示在系统中，一页ppt对应一个页面，右下方放一个上一页下一页的按钮来进行页面切换。 拿到这个需求咔咔咔就开干了，框架一复用，n页ppt，路由router中写n个路由，写个组件把第一页ppt内容一复制写个面板放在系统左侧，然后咔咔咔吧组件复制n个，依次吧文本内容修改成相应ppt的内容，上线发布完事，用时两小时，完美交差。可是过两天，ppt又改了一版页数也变了，系统内容又要跟着改，我又把上面的步骤咔咔咔一顿Ctrl+C+V，耗时一个多小时，完工上线，可是，过了一个星期，ppt的内容又变了，这次的页数特别多，这次我决定不再这样被动的跟着修改代码了，想起设计模式中的抽离变化，封装不变的原则，开始了我的改造。 既然页面布局和形式是一样的，那我就封装一个组件，接收不一样的数据即可，而且我的系统全部都算这样的页面，也就意味着我只需要一个组件就可以完成我的系统开发，那么这么多页面路由，怎么对应一个组件呢，其实很简单

在router-view里添加key控制

<router-view :key="pageIndex"/>


// 在路由文件中，让多个路由共用同一个组件，保证路由path和name属性具有唯一性 。
const routes = [
  {
    path: '/',
    name: 'rebar',
    redirect: '/screen'
  },
  {
    path: '/screen',
    name: 'screen',
    redirect: '/screenHome',
    component: () => import('../views/screen/Screen.vue'),
    children: []
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404.vue')
  },
];

pageData.forEach(element => {
  let route =
  {
    path: element?.path,
    name: element?.path,
    component: () => import('@/views/screen/screenHome.vue')
  }
  routes[1].children.push(route);
});

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

只是路由path不一样，加载的组件却是同一个 ，因为此处我们的页面非常多，因此我定义了一个配置文件，里面可以配置页面的路由，标题，文本等等，切换不同的页面根据路由找到配置文件中的内容进行渲染，后面如果客户再有修改就不用修改代码了，修改这个配置文件就行啦