feat(projects): 支持同一路由根据不同query和hash同时显示不同Tab

ISSUES CLOSED: #64

src/views/function/tab-detail/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <n-space :vertical="true" :size="16">
+    <n-card title="Tab Detail" :bordered="false" size="small" class="shadow-sm rounded-16px">
+      <n-space :vertical="true" :size="12">
+        <div>当前路由的描述数据(meta)：</div>
+        <div>{{ route.meta }}</div>
+        <n-button @click="handleToTab">返回Tab</n-button>
+      </n-space>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { routeName } from '@/router';
+import { useRouterPush } from '@/composables';
+
+const { routerPush } = useRouterPush();
+
+const route = useRoute();
+
+function handleToTab() {
+  routerPush({ name: routeName('function_tab') });
+}
+</script>
+
+<style scoped></style>

src/views/function/tab-multi-detail/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <n-space :vertical="true" :size="16">
+    <n-card title="Tab Detail" :bordered="false" size="small" class="shadow-sm rounded-16px">
+      <n-space :vertical="true" :size="12">
+        <div>当前路由的描述数据(meta)：</div>
+        <div>{{ route.meta }}</div>
+        <div>当前路由的查询数据(query)：</div>
+        <div>{{ route.query }}</div>
+        <n-button @click="handleToTab">返回Tab</n-button>
+      </n-space>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { routeName } from '@/router';
+import { useRouterPush } from '@/composables';
+
+const route = useRoute();
+const { routerPush } = useRouterPush();
+
+function handleToTab() {
+  routerPush({ name: routeName('function_tab') });
+}
+</script>
+
+<style scoped></style>

src/views/function/tab/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <n-space :vertical="true" :size="16">
+    <n-card title="Tab Home" :bordered="false" size="small" class="shadow-sm rounded-16px">
+      <n-space :vertical="true" :size="12">
+        <n-button @click="handleToTabDetail">跳转Tab Detail</n-button>
+        <n-button @click="handleToTabMultiDetail(1)">跳转Tab Multi Detail 1</n-button>
+        <n-button @click="handleToTabMultiDetail(2)">跳转Tab Multi Detail 2</n-button>
+      </n-space>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { routeName } from '@/router';
+import { useRouterPush } from '@/composables';
+
+const { routerPush } = useRouterPush();
+
+function handleToTabDetail() {
+  routerPush({ name: routeName('function_tab-detail'), query: { name: 'abc' }, hash: '#DEMO_HASH' });
+}
+
+function handleToTabMultiDetail(num: number) {
+  routerPush({ name: routeName('function_tab-multi-detail'), query: { name: 'abc', num }, hash: '#DEMO_HASH' });
+}
+</script>
+
+<style scoped></style>