fix: 无参数打开页签is-active样式问题

mock/asyncRoutes.ts

@@ -277,6 +277,16 @@ const tabsRouter = {
         roles: ["admin", "common"]
       }
     },
+    {
+      path: "/tabs/no-parameter-detail",
+      name: "TabNoParameterDetail",
+      meta: {
+        // 不在menu菜单中显示
+        showLink: false,
+        activePath: "/tabs/index",
+        roles: ["admin", "common"]
+      }
+    },
     // query 传参模式
     {
       path: "/tabs/query-detail",

src/layout/hooks/useTag.ts

@@ -117,8 +117,10 @@ export function useTags() {
     if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
       if (Object.keys(route.query).length > 0) {
         return isEqual(route.query, item.query) ? previous : next;
-      } else {
+      } else if (Object.keys(route.params).length > 0) {
         return isEqual(route.params, item.params) ? previous : next;
+      } else {
+        return route.path === item.path ? previous : next;
       }
     } else {
       return route.path === item.path ? previous : next;

src/views/tabs/hooks.ts

@@ -59,11 +59,30 @@ export function useDetail() {
       router.push({ name: "TabParamsDetail", params: parameter });
     }
   }
+  function toDetailNoParameter() {
+    // 保存信息到标签页
+    useMultiTagsStoreHook().handleTags("push", {
+      path: `/tabs/no-parameter-detail`,
+      name: "TabNoParameterDetail",
+      meta: {
+        title: {
+          zh: `无参数 - 详情信息`,
+          en: `no parameter - DetailInfo`
+        },
+        // 如果使用的是非国际化精简版title可以像下面这么写
+        // title: `No.${index} - 详情信息`,
+        // 最大打开标签数
+        dynamicLevel: 3
+      }
+    });
+    // 路由跳转
+    router.push({ name: "TabNoParameterDetail" });
+  }
 
   // 用于页面刷新，重新获取浏览器地址栏参数并保存到标签页
   const initToDetail = (model: "query" | "params") => {
     if (getParameter) toDetail(getParameter, model);
   };
 
-  return { toDetail, initToDetail, getParameter, router };
+  return { toDetail, toDetailNoParameter, initToDetail, getParameter, router };
 }

src/views/tabs/index.vue

@@ -15,7 +15,7 @@ defineOptions({
   name: "Tabs"
 });
 
-const { toDetail, router } = useDetail();
+const { toDetail, toDetailNoParameter, router } = useDetail();
 const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
 
 const treeData = computed(() => {
@@ -58,6 +58,12 @@ function onCloseTags() {
       </el-link>
     </template>
     <div class="flex flex-wrap items-center">
+      <p>无参数：</p>
+      <el-button class="m-2" @click="toDetailNoParameter()">
+        无参模式
+      </el-button>
+      <el-divider />
+
       <p>query传参模式：</p>
       <el-button
         v-for="index in 6"
@@ -155,7 +161,6 @@ function onCloseTags() {
     >
       点击查看更多跳转方式
     </el-link>
-
     <el-divider />
     <el-button @click="router.push({ name: 'Empty' })">
       跳转无Layout的空白页面

src/views/tabs/no-parameter-detail.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: "TabNoParameterDetail"
+});
+</script>
+
+<template>
+  <div>
+    <p>无参数页面</p>
+  </div>
+</template>