路由

vue3/project4/src/router/index.ts

@@ -1,28 +1,53 @@
-import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router';
-
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
+import type {RouteRecordRaw} from 'vue-router'
 // 1.引入页面路径
 import Home from '@/views/Home.vue';
 import List from '@/views/List.vue';
 import My from '@/views/My.vue';
+import Demo1 from '@/views/Demo1.vue';
+import Demo2 from '@/views/Demo2.vue';
+
+type RouteType = RouteRecordRaw & {
+    children?: RouteType[]
+}
+
+const routes:RouteType[] = [
+    // 当前项目匹配的路由
+    // 2.匹配路由
+    {
+        path: '/',
+        redirect: '/home'
+    },
+    {
+        path: '/home',
+        component: Home,
+    },
+    {
+        path: '/list',
+        component: List,
+        redirect: '/list/demo2',
+        children: [
+            // 只要是多级路由
+            {
+                path: 'demo1',
+                component: Demo1,
+                
+            },
+            {
+                path: 'demo2',
+                component: Demo2
+            }
+        ]
+    },
+    {
+        path: '/my',
+        component: My,
+    },
+]
 const router = createRouter({
     // 当前路由的模式
-    history:createWebHashHistory(),
-    routes:[
-        // 当前项目匹配的路由
-        // 2.匹配路由
-        {
-            path:'/home',
-            component: Home,
-        },
-        {
-            path:'/list',
-            component: List,
-        },
-        {
-            path:'/my',
-            component: My,
-        },
-    ]
+    history: createWebHashHistory(),
+    routes
 })
 
 export default router;

vue3/project4/src/views/Demo1.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    demo1
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project4/src/views/Demo2.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    demo2
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project4/src/views/List.vue

@@ -1,10 +1,18 @@
 <template>
-  <div>列表</div>
+  <div>
+    <h1>列表</h1>
+    <!-- 声明式导航 -->
+    <RouterLink to="/list/demo1">第一个</RouterLink>
+    <RouterLink to="/list/demo2">第二个</RouterLink>
+    <div id="main">
+      <RouterView></RouterView>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import { RouterView,RouterLink } from "vue-router";
 </script>
 
 <style lang="scss" scoped>