feat: 🚀 新增主页面显示属性结构路由导航栏

public/verify.json

@@ -1 +1 @@
-{"version":1720007747647}
+{"version":1721112961141}

src/views/layout.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="container-fluid">
 		<h1>vite-pinia 模板</h1>
-		<h1>多语言：{{ $t('tip.loading') }}</h1>
+		<h1>多语言：{{ t('tip.loading') }}</h1>
 		<div class="row">
 			<button class="btn btn-primary col-3 me-1" @click="handleI18n('en')">切换英文</button>
 			<button class="btn btn-primary col-3 mr-2" @click="handleI18n('zh_cn')">切换中文</button>
@@ -9,8 +9,15 @@
 		</div>
 
 		<ul>
-			<li v-for="(route, index) in pageRoutes" :key="index">
+			<li v-for="(route, index) in routes" :key="index">
-				<RouterLink :to="route.path">{{ `${route.path}【${String(route.name)}】` }}</RouterLink>
+				<h5>{{ route.title }}</h5>
+				<ul>
+					<li v-for="child in route.children" :key="child.path">
+						<RouterLink :to="child.path">
+							{{ `${child.path}【${String(child.name)}】` }}
+						</RouterLink>
+					</li>
+				</ul>
 			</li>
 		</ul>
 
@@ -25,9 +32,12 @@ import { pageRoutes } from '@/router/module/pageRoutes';
 import { userI18nStore } from '@/store/i18n.ts';
 import { useI18n } from 'vue-i18n';
 import { fetchTestApi } from '@/api/api-v1/test.ts';
+import { onMounted, ref } from 'vue';
 
 const i18nStore = userI18nStore();
 const i18n = useI18n();
+const { t } = useI18n();
+const routes = ref<any>([]);
 
 /**
  * * 切换多语言
@@ -45,6 +55,29 @@ const fetchMockRequest = async () => {
 	const response = await fetchTestApi();
 	console.log(response);
 };
+
+/**
+ * * 整理路由参数
+ */
+const neatenPageRoutes = () => {
+	const tree = pageRoutes.reduce((last, route) => {
+		const title = route.path.split('/')[1];
+		const data = { name: route.path, path: route.path };
+
+		if (last[title]) {
+			last[title].children.push(data);
+		} else {
+			last[title] = { title, children: [data] };
+		}
+		return last;
+	}, {});
+
+	routes.value = Object.values(tree);
+};
+
+onMounted(() => {
+	neatenPageRoutes();
+});
 </script>
 
 <style lang="scss" scoped></style>

src/views/test-tsx/index.tsx

@@ -2,6 +2,6 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
 	setup() {
-		return () => <h1> 哈哈哈 </h1>;
+		return () => <h5>TSX内容 </h5>;
 	},
 });