浏览器tab开多个，每个tab是一个模块。如何设置？

Question

浏览器tab开多个，每个tab是一个模块。如何设置？
技术是vue2脚手架
业务需求：用户登录之后显示N个卡片，每个卡片为一个模块，
如项目模块，报表模块，
每个模块下方有N个链接，如项目模块-》项目列表A，项目列表B，报表模块-》报表类型C，报表类型D。
点击A，检测当前浏览器有没有开项目模块，如果没有就开一个新的浏览器tab，并且打开A界面
如果有项目模块就在项目模块tab页，经过路由跳转到点击得A路径

总的来说就是 属于 项目得路径只能在项目浏览器tab内部跳，属于报表得只能在报表tab跳，

Answer 1

先配一下路由
router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const projectRoutes = [
  {
    path: '/project/list-a',
    name: 'ProjectListA',
    component: () => import('../views/project/ListA.vue'),
    meta: { module: 'project' }
  },
  {
    path: '/project/list-b',
    name: 'ProjectListB',
    component: () => import('../views/project/ListB.vue'),
    meta: { module: 'project' }
  }
]

const reportRoutes = [
  {
    path: '/report/type-c',
    name: 'ReportTypeC',
    component: () => import('../views/report/TypeC.vue'),
    meta: { module: 'report' }
  },
  {
    path: '/report/type-d',
    name: 'ReportTypeD',
    component: () => import('../views/report/TypeD.vue'),
    meta: { module: 'report' }
  }
]

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  ...projectRoutes,
  ...reportRoutes
]

const router = new VueRouter({
  routes
})

export default router

主界面 (views/Home.vue):

<template>
  <div class="home">
    <div class="card-container">
      <div v-for="(module, key) in modules" :key="key" class="module-card">
        <h3>{{ module.name }}</h3>
        <div class="module-links">
          <a 
            v-for="link in module.links" 
            :key="link.path"
            href="javascript:void(0)"
            @click="handleLinkClick(key, link.path)"
          >
            {{ link.name }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      modules: {
        project: {
          name: '项目模块',
          links: [
            { name: '项目列表A', path: '/project/list-a' },
            { name: '项目列表B', path: '/project/list-b' }
          ]
        },
        report: {
          name: '报表模块',
          links: [
            { name: '报表类型C', path: '/report/type-c' },
            { name: '报表类型D', path: '/report/type-d' }
          ]
        }
      }
    }
  },
  methods: {
    handleLinkClick(moduleKey, path) {
      const windowName = `module_${moduleKey}`
      const existingWindow = window.open('', windowName)

      if (existingWindow && !existingWindow.closed) {
    
        localStorage.setItem('navigationEvent', JSON.stringify({
          moduleKey,
          path,
          timestamp: Date.now()
        }))
      } else {
        const baseUrl = process.env.BASE_URL || '/'
        window.open(`${baseUrl}#${path}`, windowName)
      }
    }
  }
}
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.module-card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  width: 250px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.module-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.module-links a {
  color: #0066cc;
  text-decoration: none;
  cursor: pointer;
}

.module-links a:hover {
  text-decoration: underline;
}
</style>

App.vue:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    
    if (window.name.startsWith('module_')) {
      this.listenForNavigationEvents()
    }
  },
  methods: {
    getCurrentModule() {
      return window.name.split('_')[1]
    },
    listenForNavigationEvents() {
      window.addEventListener('storage', (e) => {
        if (e.key === 'navigationEvent') {
          const data = JSON.parse(e.newValue)
          const currentModule = this.getCurrentModule()

          if (data.moduleKey === currentModule) {
            this.$router.push(data.path)
          }
        }
      })
    }
  }
}
</script>

其中一个模块 (views/project/ListA.vue):

<template>
  <div class="project-list-a">
    <h2>项目列表A</h2>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  name: 'ProjectListA',
  created() {
   
    this.validateModule()
  },
  methods: {
    validateModule() {
      const currentModule = window.name.split('_')[1]
      const routeModule = this.$route.meta.module

      if (currentModule && routeModule && currentModule !== routeModule) {
       
        const windowName = `module_${routeModule}`
        const existingWindow = window.open('', windowName)

        if (existingWindow && !existingWindow.closed) {
          localStorage.setItem('navigationEvent', JSON.stringify({
            moduleKey: routeModule,
            path: this.$route.path,
            timestamp: Date.now()
          }))
        } else {
          window.open(`${process.env.BASE_URL}#${this.$route.path}`, windowName)
        }
        
        if (window.history.length > 1) {
          this.$router.go(-1)
        } else {
          window.close()
        }
      }
    }
  }
}
</script>

在main.js中添加导航守卫:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

router.beforeEach((to, from, next) => {

  if (window.name.startsWith('module_')) {
    const currentModule = window.name.split('_')[1]
    const routeModule = to.meta.module

    if (routeModule && currentModule !== routeModule) {
     
      next(false)
      return
    }
  }
  next()
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

建一个混入 (mixins/moduleValidation.js):

export default {
  created() {
    this.validateModule()
  },
  methods: {
    validateModule() {
      const currentModule = window.name.split('_')[1]
      const routeModule = this.$route.meta.module

      if (currentModule && routeModule && currentModule !== routeModule) {
        const windowName = `module_${routeModule}`
        const existingWindow = window.open('', windowName)

        if (existingWindow && !existingWindow.closed) {
          localStorage.setItem('navigationEvent', JSON.stringify({
            moduleKey: routeModule,
            path: this.$route.path,
            timestamp: Date.now()
          }))
        } else {
          window.open(`${process.env.BASE_URL}#${this.$route.path}`, windowName)
        }
        
        if (window.history.length > 1) {
          this.$router.go(-1)
        } else {
          window.close()
        }
      }
    }
  }
}

用混入：

<script>
import moduleValidation from '@/mixins/moduleValidation'

export default {
  name: 'ProjectListA',
  mixins: [moduleValidation],
  // ... 其他配置
}
</script>