admin

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

@@ -1,16 +1,30 @@
 <template>
   <div id="app">
-    
-
     <nav>
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link> |
       <!-- 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> | 
+      <!-- 路由参数 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="/pagetwo">页面二</router-link>
+      <router-link to="/backhome">返回首页</router-link> | 
+      <router-link to="/onepage">页面一别名</router-link> | 
+      <button @click="goPage">跳转页面二</button>
 
       <!-- 实现页面跳转分为3步 -->
       <!-- 第一步创建组件页面 vue文件 -->
@@ -18,11 +32,50 @@
       <!-- 第三步 在路由组件中添加路由出口 -->
     </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,10 @@ const routes = [
   },{
     path:'/pageone',
     name:'pageone',
+    alias:"/onepage",
     // ../ 表示上一级目录 ./ 表示当前目录
-    component: () => import("../views/PageOne.vue")
+    component: () => import("../views/PageOne.vue"),
+    
   },{
     path:'/pagetwo',
     name:'pagetwo',
@@ -57,6 +59,18 @@ const routes = [
         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/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

@@ -1,6 +1,8 @@
 <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>