Vue 后台管理系统：如何实现表格列表点击打开子页面并避免重复打开？

实现这种逻辑可以使用 Vue Router 的动态路由配置和路由守卫功能。\n\n首先，在 Vue Router 的路由配置中，定义需要打开的子页面的路由，例如：\n\njavascript\nconst routes = [\n // 其他路由配置...\n {\n path: '/subpage/:id',\n name: 'subpage',\n component: Subpage\n }\n]\n\n\n然后，在父页面中的表格列表中，使用 <router-link> 标签来跳转到子页面，并传递一个参数来表示子页面的 id，例如：\n\nhtml\n<template>\n <div>\n <table>\n <tr v-for="item in items" :key="item.id">\n <td>{{ item.name }}</td>\n <td>\n <router-link :to="{ name: 'subpage', params: { id: item.id } }">打开</router-link>\n </td>\n </tr>\n </table>\n </div>\n</template>\n\n\n接下来，在 Vue Router 的全局前置守卫中，判断如果另一个子页面已经打开，则不再进行打开操作，如果没有打开则进行打开操作，例如：\n\njavascript\nrouter.beforeEach((to, from, next) => {\n // 判断是否是要打开的子页面\n if (to.name === 'subpage') {\n // 判断子页面是否已经打开\n const isOpen = store.state.subpages.includes(to.params.id);\n if (isOpen) {\n // 子页面已经打开，不再进行打开操作\n next(false);\n } else {\n // 子页面没有打开，进行打开操作\n store.commit('addSubpage', to.params.id);\n next();\n }\n } else {\n next();\n }\n});\n\n\n在上述代码中，假设 store.state.subpages 是一个存储已经打开的子页面 id 的数组，store.commit('addSubpage', to.params.id) 是一个用于将子页面 id 添加到数组中的 Vuex mutation。\n\n通过以上逻辑，即可实现在表格列表中点击打开另一个子页面时，判断子页面是否已经打开的功能。