admin

10_vuecli/helloworld/src/App.vue

@@ -10,12 +10,15 @@
         <router-link to="/about">
           <div class="nav-item">关于</div>
         </router-link>
-        <router-link to="/pageone">
+        <router-link :to="{name:'pageone',params:{a:10,b:20}}">
           <div class="nav-item">页面一</div>
         </router-link>
          <router-link to="/pagetwo">
           <div class="nav-item">页面二</div>
         </router-link>
+        <router-link to="/pagethree">
+          <div class="nav-item">页面三</div>
+        </router-link>
       </nav>
       <!-- router-view 就是路由出口 -->
        <div class="content">

10_vuecli/helloworld/src/router/index.js

@@ -32,6 +32,23 @@ const routes = [
     path:"/pagetwo",
     name:"pagetwo",
     component: () => import("../views/PageTwo.vue")
+  },{
+    path:"/pagethree",
+    name:"pagethree",
+    component: () => import("../views/PageThree.vue"),
+    // 子路由 配置在父路由的 children 数组中
+    children:[
+      {
+        // 子路由path比较好的写法 继续在父路由的路径后面写
+        path:"/pagethree/child1",
+        name:"pagethreechild1",
+        component: () => import("../views/PageThreeChild1.vue")
+      },{
+        path:"/pagethree/child2/:id",
+        name:"pagethreechild2",
+        component: () => import("../views/PageThreeChild2.vue")
+      }
+    ]
   }
 ]
 

10_vuecli/helloworld/src/views/PageOne.vue

@@ -6,5 +6,18 @@
          <!-- 1. 在 src/views 目录下创建 .vue 文件 页面文件 -->
          <!-- 2. 在 src/router/index.js 中配置路由 -->
          <!-- 3. 在 相应的页面 中添加路由链接 -->
+        <div>
+            <h1>参数a:{{ $route.params.a }}</h1>
+            <h1>参数b:{{ $route.params.b }}</h1>
+        </div>  
     </div>
-</template>
+</template>
+<script>
+    export default{
+        name:"PageOne",
+        created(){
+            console.log(this.$route.params.a);
+            console.log(this.$route.params.b);
+        }
+    }
+</script>

10_vuecli/helloworld/src/views/PageThree.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <h1>我是页面三</h1>
+        <!-- params 模式传参 地址栏中没有参数  刷新页面参数会消失-->
+        <!-- query 模式传参 地址栏中会有参数  刷新页面参数不会消失-->
+        <div>
+            <router-link :to="{path:'/pagethree/child1',query:{x:100,y:200}}">子页面一</router-link>｜
+            <router-link to="/pagethree/child2/1001">子页面二</router-link>
+        </div>
+        <router-view />
+    </div>
+</template>

10_vuecli/helloworld/src/views/PageThreeChild1.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <h1>我是页面三的子页面一</h1>
+        <div>
+            <h1>参数x:{{ $route.query.x }}</h1>
+            <h1>参数y:{{ $route.query.y }}</h1>
+        </div>
+    </div>
+</template>
+<script>
+    export default{
+        name:"PageThreeChild1",
+        created(){
+            console.log(this.$route.query.x);
+            console.log(this.$route.query.y);
+        }
+    }
+</script>

10_vuecli/helloworld/src/views/PageThreeChild2.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <h1>我是页面三的子页面二</h1>
+        <div>
+            <h1>参数id:{{ $route.params.id }}</h1>
+        </div>
+    </div>
+</template>
+<script>
+    export default{
+        name:"PageThreeChild2",
+        created(){
+            console.log(this.$route.params.id);
+        }
+    }
+</script>