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

@@ -2,21 +2,80 @@
   <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> |  -->
+      <!-- 路由参数 to后边跟一个对象 name 要跳转的页面路由名称 params是要传递的参数 -->
+      <router-link :to="{ name: 'pageone', params: { a: 100, b: 'hello' } }"
+        >页面一</router-link
+      >
+      |
+
+      <!-- <router-link to="/pagetwo">页面二</router-link> -->
+      <!-- 路由参数 to后边跟一个对象 name 要跳转的页面路由名称 query是要传递的参数 -->
+      <!-- query 方式传递参数通过url 拼接参数 ？后边是参数多个参数用&符号连接  ？id=1001&a=hello -->
+      <!-- query 整体使用方式类似于params 但是query传递的参数刷新页面仍然存在 -->
+      <router-link :to="{ name: 'pagetwo', query: { id: 1001, a: 'hello' } }"
+        >页面二</router-link
+      > | 
+
+      <router-link to="/pagethree/1001">页面三</router-link> |
+
+      <router-link to="/backhome">返回首页</router-link> | 
+      <router-link to="/onepage">页面一别名</router-link> | 
+      <button @click="goPage">跳转页面二</button>
 
       <!-- 实现页面跳转分为3步 -->
-       <!-- 第一步创建组件页面 vue文件 -->
-        <!-- 第二步 在router/index.js 注册页面组件 -->
-         <!-- 第三步 在路由组件中添加路由出口 -->
+      <!-- 第一步创建组件页面 vue文件 -->
+      <!-- 第二步 在router/index.js 注册页面组件 -->
+      <!-- 第三步 在路由组件中添加路由出口 -->
     </nav>
-    <router-view/>
+    <!-- 用来显示跳转的页面部分 -->
+     <!-- transition 一般是给页面、组件、标签显示隐藏时加一些动态效果 -->
+    <transition name="fade">
+      <router-view />
+    </transition>
+    
   </div>
 </template>
-
+<script>
+  export default{
+    name:"App",
+    methods:{
+      goPage(){
+        // 用js实现页面跳转 编程式导航
+        // this.$router.push("/pagetwo");// 直接跳转到页面二path
+        // router-link 路由链接的to属性指定跳转的路径 这里都写在push方法中  
+        this.$router.push({
+          name:"pagetwo", // 路由名称
+          query:{
+            id:1006, // 路由参数
+            a:"world"
+          }
+        })
+      }
+    }
+  }
+</script>
 <style>
+
+.fade-enter{
+  opacity: 0;
+}
+.fade-enter-active{
+  transition:all 0.5s ease;
+  transition-delay: 0.5s;
+}
+.fade-leave{
+  opacity: 1;
+}
+.fade-leave-active{
+  opacity: 0;
+  transition:all 0.5s ease;
+}
+
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

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

@@ -38,8 +38,39 @@ const routes = [
   },{
     path:'/pageone',
     name:'pageone',
+    alias:"/onepage",
     // ../ 表示上一级目录 ./ 表示当前目录
-    component: () => import("../views/PageOne.vue")
+    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")
+      }
+    ]
+  },{
+    // 动态路由参数 以：开头
+    // :id 表示动态参数 可以在访问该路径时传递不同的参数
+    // 例如 /pagethree/1001 /pagethree/1002 等等
+    path:"/pagethree/:id",
+    name:"pagethree",
+    component:() => import("../views/PageThree.vue")
+  },{
+    // 重定向
+    path:'/backhome',
+    // redirect 属性用于重定向到指定的路径
+    redirect:'/' // 重定向到首页
   }
 ]
 

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/PageThree.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="page-three">
+        <h1>这里是页面三</h1>
+        <p>这里是路由参数：{{ $route.params.id }}</p>
+    </div>
+</template>
+<script>
+    export default {
+        name:"PageThree",
+        // 组件的生命周期函数
+        // 组件创建完成后调用
+        created(){
+            console.log(this.$route.params.id);
+        }
+    }
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+    <div class="page-two">
+        <h1>这里是页面二</h1>
+        <p>这里是路由参数：{{ $route.query.id }}</p>
+        <p>这里是路由参数：{{ $route.query.a }}</p>
+        <!-- 配置跳转链接 -->
+         <router-link to="/pagetwo/childone">子页面一</router-link> | 
+         <router-link to="/pagetwo/childtwo">子页面二</router-link>
+        <!-- 配置路由出口 页面显示的部分  -->
+         <router-view></router-view>
+   </div>
+</template>