admin

12_vuecli/myapp/src/router/index.js

@@ -24,7 +24,19 @@ const routes = [
     // name 代表路由的名称 
     name:"mypage",
     // component 代表路由的组件 当前要显示的页面
-    component:() => import("../views/MyPage.vue")
+    component:() => import("../views/MyPage.vue"),
+    children:[
+      {
+        path:'/mypage/childone',
+        name:'childone',
+        component:() => import("../views/ChildOne.vue")
+      },
+      {
+        path:'/mypage/childtwo',
+        name:"childtwo",
+        component:() => import("../views/ChildTwo.vue")
+      }
+    ]
   }
 ]
 

12_vuecli/myapp/src/views/ChildOne.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="child-one">
+        <h1>子页面一</h1>
+        <h1>用户名称：{{$route.params.username}}</h1>
+        <h1>用户年龄：{{$route.params.age}}</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            
+        }
+    },
+    mounted() {
+        console.log(this.$route.params.username)
+    },
+}
+</script>

12_vuecli/myapp/src/views/ChildTwo.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="child-two">
+        <h1>子页面二</h1>
+    </div>
+</template>

12_vuecli/myapp/src/views/MyPage.vue

@@ -3,6 +3,12 @@
     <div class="my-page">
         <h1>My Page</h1>
         <h1>{{str}}</h1>
+
+        <!-- <router-link to="/mypage/childone">子路由一</router-link>｜ -->
+        <router-link v-bind:to="{name:'childone',params:{username:userName,age:userAge}}">子路由一</router-link>｜
+        
+        <router-link to="/mypage/childtwo">子路由二</router-link>
+        <router-view/>
     </div>
 </template>
 
@@ -18,7 +24,9 @@
 export default {
     data(){
         return{
-            str:"hello world!"
+            str:"hello world!",
+            userName:"张三",
+            userAge:18
         }
     },
     methods: {