admin

10-vuecli/vueapp/myapptwo/src/App.vue

@@ -1,18 +1,24 @@
 <template>
   <div id="app">
+    
+
     <nav>
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link> | 
+      <router-link to="/about">About</router-link> |
       <!-- router-link 组件是用来实现页面跳转的 -->
-       <!-- 路由链接的to属性指定跳转的路径 这个路径就是在router/index.js中配置path -->
-      <router-link to="/pageone">页面一</router-link>
+      <!-- 路由链接的to属性指定跳转的路径 这个路径就是在router/index.js中配置path -->
+      <!-- <router-link to="/pageone">页面一</router-link> |  -->
+      <router-link :to="{name:'pageone',params:{a:100,b:'hello'}}">页面一</router-link> | 
+
+      <router-link to="/pagetwo">页面二</router-link>
 
       <!-- 实现页面跳转分为3步 -->
-       <!-- 第一步创建组件页面 vue文件 -->
-        <!-- 第二步 在router/index.js 注册页面组件 -->
-         <!-- 第三步 在路由组件中添加路由出口 -->
+      <!-- 第一步创建组件页面 vue文件 -->
+      <!-- 第二步 在router/index.js 注册页面组件 -->
+      <!-- 第三步 在路由组件中添加路由出口 -->
     </nav>
-    <router-view/>
+    <!-- 用来显示跳转的页面部分 -->
+     <router-view />
   </div>
 </template>
 

10-vuecli/vueapp/myapptwo/src/router/index.js

@@ -40,6 +40,23 @@ const routes = [
     name:'pageone',
     // ../ 表示上一级目录 ./ 表示当前目录
     component: () => import("../views/PageOne.vue")
+  },{
+    path:'/pagetwo',
+    name:'pagetwo',
+    component:() => import("../views/PageTwo.vue"),
+    // 配置子路由
+    children:[
+      {
+        // 子路由的path 一般都是以父级路由开头
+        path:'/pagetwo/childone',
+        name:'childone',
+        component:() => import("../views/ChildPageOne.vue")
+      },{
+        path:"/pagetwo/childtwo",
+        name:'childtwo',
+        component:() => import("../views/ChildPageTwo.vue")
+      }
+    ]
   }
 ]
 

10-vuecli/vueapp/myapptwo/src/views/ChildPageOne.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="child-page-one">
+        <h1>这是子页面一</h1>
+    </div>
+</template>

10-vuecli/vueapp/myapptwo/src/views/ChildPageTwo.vue

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

10-vuecli/vueapp/myapptwo/src/views/PageOne.vue

@@ -1,5 +1,18 @@
 <template>
     <div class="page-one">
         <h1>这是我的页面一</h1>
+        <!-- 显示路由参数  $route.params 是一个对象 可以通过点语法来获取参数 -->
+        <p>这里是路由参数a：{{ $route.params.a }}</p>
+        <p>这里是路由参数b：{{ $route.params.b }}</p>
     </div>
-</template>
+</template>
+<script>
+    export default{
+        name:"PageOne",
+        // 组件的生命周期函数
+        // 组件创建完成后调用
+        created(){
+            console.log(this.$route.params.a);
+        }
+    }
+</script>

10-vuecli/vueapp/myapptwo/src/views/PageTwo.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="page-two">
+        <h1>这里是页面二</h1>
+        <!-- 配置跳转链接 -->
+         <router-link to="/pagetwo/childone">子页面一</router-link> | 
+         <router-link to="/pagetwo/childtwo">子页面二</router-link>
+        <!-- 配置路由出口 页面显示的部分  -->
+         <router-view></router-view>
+   </div>
+</template>