vue3+ts+setup 路由中的路由保留原来的位置以及参数

app.vue

	
<template>
  <div class="zjl-pc-vue3-typeScript">

    <!-- <keep-alive>
      <router-view></router-view>

      
    </keep-alive> -->

    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

index.vue

	
<template>
  <section class="steward_container">
    <header class="steward_header">
      <normal-header />
    </header>
    <section class="steward_contect">
      <aside class="steward_aside">
        <normal-menu />
      </aside>
      <main class="steward_main">
        <!-- <top-tabs></top-tabs> -->
        <tab-close />  // 面包削
        <div class="steward_main_router">
          <!-- <router-view v-slot="{ Component, route }">
            <keep-alive v-if="route.meta.keepAlive">
              <component :is="Component" :key="route.name" />
            </keep-alive>
            <component v-else :is="Component" :key="route.name" />
          </router-view> -->
          <!-- <router-view></router-view> -->

          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </main>
    </section>
  </section>
</template>

router index.ts

	// 全局守卫
router.beforeEach((to, from, next) => {
  console.log(to, from, next);

  const counter = useCounterStore();
  const { allMenu } = storeToRefs(counter);
  const { changeTab, updateTopTabs } = counter;
  // 未登录跳转登录界面
  // const isAuthenticated = localStorage.getItem("user_id");
  const isAuthenticated = sessionStorage.getItem("user_id");
  if (to.name !== "login" && !isAuthenticated) {
    next({ name: "login" });
  } else {
    // 根据路由切换选中项
    const path = to.path.split("/");
    // console.log('切换路由');
    changeTab(path[2]);
    // 如果不存在该tab需添加
    for (const tab of allMenu.value) {
      if (path[2] === tab.name) {
        updateTopTabs({
          icon: tab.icon,
          label: tab.label,
          name: tab.name,
          path: tab.path,
          sort: tab.sort,
          path2: to.fullPath,
        });
        console.log(tab);
      }
    }
    console.log(path);

    console.log(window.location.href.split("#"));
    console.log(window.location.hash);

    next();
  }
});

store pinia.ts

  // 更新tabs
  function updateTopTabs(data) {
    // // 没有该数据才添加
    // console.log(data);
    // console.log(topTabs.value);
    // topTabs.value.map(item=>{
    //   if(item.name === data.name){
    //     item.path = data.path
    //   }

    // })
    // console.log(topTabs.value);

    // for (const tab of topTabs.value) {
    //   // if (tab.path === data.path) return false;
    //   if (tab.name === data.name) return false;
    // }
    // console.log(data);

    // topTabs.value.push(data);
    // // topTabs.value.push(data);
    // sessionStorage.setItem("topTabs", JSON.stringify(topTabs.value));

    console.log(data);
    console.log(topTabs.value);
    topTabs.value.map((item) => {
      if (item.name == data.name) {
        item.path2 = data.path2;
      }
    });
    for (const tab of topTabs.value) {
      // if (tab.path === data.path) return false;
      if (tab.name === data.name) return false;
    }

    topTabs.value.push(data);
    console.log(topTabs.value);
    sessionStorage.setItem("topTabs", JSON.stringify(topTabs.value));
  }

  // 删除tabs
  function deleteTopTabs(selectName: string | number) {
    topTabs.value = topTabs.value.filter((tab) => tab.name !== selectName);
    sessionStorage.setItem("topTabs", JSON.stringify(topTabs.value));
  }
  // 清空tabs
  function clearTopTabs() {
    topTabs.value = [
      {
        label: "首页",
        name: "home",
        path: "/index",
      },
    ];
  }