技术验证：vueRouter的命名视图加splitpanes分割面板实现一个页面多个模块同时处理不同页面的功能

<template>
  <h1>Named Views</h1>
  <ul>
    <li>
      <router-link to="/">回首页</router-link>
    </li>
    <li>
      <router-link to="/other">ABC变成CBA</router-link>
    </li>
  </ul>
  <splitpanes class="default-theme" horizontal style="height: 400px">
    <pane min-size="20" max-size="70">
      <router-view class="view one"></router-view>
    </pane>
    <pane>
      <router-view class="view two" name="b">
      </router-view>
    </pane>
    <pane max-size="70">
      <router-view class="view two" name="c"></router-view>
    </pane>
  </splitpanes>
</template>

<script>
export default {
  name: "App",
  components: { Splitpanes, Pane },
};

import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.router-link-active {
  color: orange;
}

.router-link-exact-active {
  color: crimson;
}
</style>

<style scoped>
ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

li:not(:last-of-type) {
  margin-right: 1rem;
}

.splitpanes__pane {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica, Arial, sans-serif;
  color: rgba(55, 49, 49, 0.6);
}
</style>

router.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import First from '../views/First.vue'
import Second from '../views/Second.vue'
import Third from '../views/Third.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'welcome',
      // a single route can define multiple named components
      // which will be rendered into <router-view>s with corresponding names.
      components: {
        default: First,
        b: Second,
        c: Third,
      },
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      components: {
        default: Second,
        b: First,
      },
    },
    {
      path: '/other',
      name: 'other',
      components: {
        default: Third,
        b: First,
        c: First,
      },
    },
    {
      path: '/atob',
      name: 'atob',
      component: Second,
    },
    {
      path: '/atoc',
      name: 'atoc',
      component: Third,
    },
    {
      path: '/btoa',
      name: 'btoa',
      components: {
        b: First,
      },
    },
    {
      path: '/btoc',
      name: 'btoc',
      components: {
        b: Third,
      },
    },
    {
      path: '/ctoa',
      name: 'ctoa',
      components: {
        c: First,
      },
    },
    {
      path: '/ctob',
      name: 'ctob',
      components: {
        c: Second,
      },
    },
    {
      path: '/toa',
      name: 'toa',
      component: First,
    },
    {
      path: '/tob',
      name: 'tob',
      components: {
        b: Second,
      },
    },
    {
      path: '/toc',
      name: 'toc',
      components: {
        c: Third,
      },
    },
  ],
})
// GOOD
router.beforeEach((to, from, next) => {
  console.log("to", to);
  console.log("from", from);
  if (to.matched.length > 0 && from.matched.length > 0) {
    console.log("都存在");
    if (to.matched[0].components && from.matched[0].components) {
      console.log("都有components");
      console.log("to", to.matched[0].components);
      console.log("from", from.matched[0].components.length);
      if (!to.matched[0].components.default) {
        console.log("如果a页面没有窈窕结转的数据");
        to.matched[0].components.default = from.matched[0].components.default
      } else {
        console.log("如果要跳转的页面路由中也有ab页面要跳转的内容");

        if (to.matched[0].components.default !== from.matched[0].components.default) {
          console.log("如果要ab跳转的页面和现在的ab页面不同则更新ab页面");

          // to.matched[0].components.a = from.matched[0].components.a
        } else {
          console.log("如果ab要跳转的页面和已有的相同则不变");

        }
      }
      if (!to.matched[0].components.b) {
        console.log("如果a页面没有窈窕结转的数据");
        to.matched[0].components.b = from.matched[0].components.b
      } else {
        console.log("如果要跳转的页面路由中也有ab页面要跳转的内容");

        if (to.matched[0].components.b !== from.matched[0].components.b) {
          console.log("如果要ab跳转的页面和现在的ab页面不同则更新ab页面");

          // to.matched[0].components.a = from.matched[0].components.a
        } else {
          console.log("如果ab要跳转的页面和已有的相同则不变");

        }
      }

      if (!to.matched[0].components.c) {
        console.log("如果a页面没有窈窕结转的数据");
        to.matched[0].components.c = from.matched[0].components.c
      } else {
        console.log("如果要跳转的页面路由中也有ab页面要跳转的内容");

        if (to.matched[0].components.a !== from.matched[0].components.c) {
          console.log("如果要ab跳转的页面和现在的ab页面不同则更新ab页面");

          // to.matched[0].components.a = from.matched[0].components.a
        } else {
          console.log("如果ab要跳转的页面和已有的相同则不变");

        }
      }
    }
  }
  next()
})
router.afterEach((to, from) => {
  console.log("to", to);
  console.log("from", from);
})

export default router

First.vue 、Second.vue、Third.vue基本相同

<script setup lang='ts'>
defineOptions({
    name: 'First'
})
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
const data = ref(0)
const counter = ref(0);
let intervalId: number | null = null;
 
    const incrementCounter = () => {
      counter.value++;
    };
 
    onMounted(() => {
      intervalId = window.setInterval(incrementCounter, 1000);
    });
 
    onUnmounted(() => {
      if (intervalId) {
        window.clearInterval(intervalId);
      }
    });
</script>

<template>
    <div>
        第一个页面{{  counter}}
      <router-link to="/">会首页</router-link>
      <router-link to="/toa">a去a</router-link>
      <router-link to="/atob">a去b</router-link>
      <router-link to="/atoc">a去c</router-link>
      <router-link to="/tob">b去b</router-link>
      <router-link to="/btoa">b去a</router-link>
      <router-link to="/btoc">b去c</router-link>
      <router-link to="/toc">c去c</router-link>
      <router-link to="/ctoa">c去a</router-link>
      <router-link to="/ctob">c去b</router-link>
    </div>
</template>

<style lang='scss' scoped>

</style>