admin

12_vuecli/myapp/src/App.vue

@@ -4,7 +4,12 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>|
       <!-- router-link to属性是填写页面跳转path -->
-      <router-link to="/mypage">MyPage</router-link>
+      <router-link to="/mypage">MyPage</router-link>｜
+      <!-- 实现路由重定向 -->
+      <router-link to="/backhome">返回首页</router-link>｜
+      <router-link to="/mypage/childthree/王五/21">重定向子路由三</router-link>｜
+      <!-- 别名 -->
+      <router-link to="/my">我的页面</router-link>
     </nav>
     <!-- router-view 用来展示切换页面的地方 -->
     <router-view/>

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

@@ -25,6 +25,9 @@ const routes = [
     name:"mypage",
     // component 代表路由的组件 当前要显示的页面
     component:() => import("../views/MyPage.vue"),
+    // alias 别名
+    alias:'/my',
+    // children 代表子路由
     children:[
       {
         path:'/mypage/childone',
@@ -35,8 +38,19 @@ const routes = [
         path:'/mypage/childtwo',
         name:"childtwo",
         component:() => import("../views/ChildTwo.vue")
+      },
+      {
+        path:'/mypage/childthree/:username/:age',
+        name:'childthree',
+        component:() => import("../views/ChildThree.vue")
       }
     ]
+  },{
+    path:'/backhome',
+    redirect:'/'
+  },{
+    path:"/gochildthree/:username/:age",
+    redirect:"/mypage/childthree/:username/:age"
   }
 ]
 

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

@@ -0,0 +1,26 @@
+<template>
+    <div class="child-three">
+        <h1>子页面三</h1>
+        <h1>用户名:{{$route.params.username}}</h1>
+        <h1>用户年龄:{{$route.params.age}}</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    mounted() {
+        // let username =this.$route.params.username;
+        // let age = this.$route.params.age;
+
+        let {username,age} = this.$route.params;
+
+        // console.log(this.$route.params)
+        // console.log(this.$route.params.username);
+        // console.log(this.$route.params.age);
+
+        console.log(username,age);
+        
+        
+    },
+}
+</script>

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

@@ -1,5 +1,14 @@
 <template>
     <div class="child-two">
         <h1>子页面二</h1>
+        <h1>用户名：{{$route.query.username}}</h1>
+        <h1>用户年龄:{{$route.query.age}}</h1>
     </div>
-</template>
+</template>
+<script>
+export default {
+    mounted() {
+        console.log(this.$route.query.username)
+    },
+}
+</script>

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

@@ -7,7 +7,10 @@
         <!-- <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-link to="/mypage/childtwo">子路由二</router-link> -->
+        <router-link :to="{path:'/mypage/childtwo',query:{username:userName,age:userAge}}">子路由二</router-link>
+
+        <router-link to="/mypage/childthree/李四/20">子路由三</router-link>
         <router-view/>
     </div>
 </template>