Vue 后台管理系统：如何避免重复打开子页面？

"可以通过路由的方式来实现这种逻辑。\n\n首先，在路由配置文件中，将需要打开的子页面配置为一个独立的路由。\n\njavascript\n// router.js\nconst routes = [\n {\n path: '/list',\n component: List\n },\n {\n path: '/detail',\n component: Detail\n }\n]\n\n\n然后，在列表页面中，通过router-link来跳转到子页面，并传递一个参数来标识该子页面是否已经打开。\n\nhtml\n<template>\n <div>\n <table>\n <!-- 表格列表 -->\n <tr v-for="item in list" :key="item.id">\n <td>{{ item.name }}</td>\n <td>\n <!-- 跳转到子页面 -->\n <router-link :to="{ path: '/detail', query: { id: item.id, opened: isDetailOpened(item.id) } }">\n 详情\n </router-link>\n </td>\n </tr>\n </table>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n list: [\n { id: 1, name: 'A' },\n { id: 2, name: 'B' },\n { id: 3, name: 'C' }\n ],\n openedDetails: []\n }\n },\n methods: {\n isDetailOpened(id) {\n return this.openedDetails.includes(id)\n }\n }\n }\n</script>\n\n\n接着，在子页面中，接收传递过来的参数，并判断该子页面是否已经打开。如果已经打开，则不进行任何操作；如果没有打开，则保存已打开的子页面，并进行相应的操作。\n\nhtml\n<template>\n <div>\n <!-- 页面内容 -->\n </div>\n</template>\n\n<script>\n export default {\n mounted() {\n const id = this.$route.query.id\n const opened = this.$route.query.opened\n\n if (!opened) {\n // 进行打开操作\n // ...\n\n // 保存已打开的子页面\n this.$parent.openedDetails.push(id)\n }\n }\n }\n</script>\n\n\n这样，当点击列表中的详情链接时，会根据是否已经打开子页面来判断是否进行打开操作。如果已经打开，则不进行任何操作；如果没有打开，则进行打开操作，并保存已打开的子页面。\n