admin

10_vuecli/helloworld/src/App.vue

@@ -16,20 +16,65 @@
          <router-link to="/pagetwo">
           <div class="nav-item">页面二</div>
         </router-link>
-        <router-link to="/pagethree">
+        <!-- <router-link to="/pagethree"> -->
+        <router-link :to="{name:'pagethree',query:{x:123,y:456}}">
           <div class="nav-item">页面三</div>
         </router-link>
+        <router-link to="/home">
+          <div class="nav-item">返回首页</div>
+        </router-link>
+        <router-link to="/backhome">
+          <div class="nav-item">首页别名</div>
+        </router-link>
+
+        <div class="nav-item" @click="goPage">
+          编程式导航
+        </div>
       </nav>
       <!-- router-view 就是路由出口 -->
-       <div class="content">
-        <router-view />
+       <div class="content" >
+        <!-- 路由过渡效果 name 属性 就是路由过渡效果的名称 -->
+        <transition name="fade">
+          <router-view />
+        </transition>
        </div>
     </div>
 
   </div>
 </template>
-
+<script>
+  
+export default{
+    name:"App",
+    methods:{
+        goPage(){
+          // 编程式导航  push 类似于 router-link to 属性
+          // this.$router.push("/pagetwo");
+          // this.$router.push({name:'pagethree',query:{x:999,y:666}})
+          // go 方法 类似于浏览器的前进后退 里面的数字式步数 负数后退 正数前进
+          // this.$router.go(-1);
+        }
+    }
+}
+</script>
 <style>
+/* 路由过渡效果 */
+.fade-enter{
+  opacity: 0;
+}
+.fade-enter-active{
+  transition: all 1s ease-in-out;
+}
+.fade-enter-to{
+  opacity: 1;
+}
+.fade-leave{
+  opacity: 1;
+}
+.fade-leave-active{
+  transition: all 0.5s ease-in-out;
+  opacity: 0;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

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

@@ -20,6 +20,18 @@ const routes = [
   {
     path: '/about',
     name: 'about',
+    // 路由守卫 
+    beforeEnter(to,from,next){
+      // 内部有三个参数
+      // to 即将要进入的路由对象
+      // from 当前正要离开的路由对象
+      // next 函数 必须调用 否则路由守卫会阻塞组件的进入
+      console.log(to);
+      console.log(from);
+      // 只有执行 next() 方法 组件才会进入
+      next();
+      console.log("AboutView 组件即将进入");
+    },
     // 懒加载模式 访问到这个路由的时候 才加载对应的组件
     // 一般除了首页其他页面 会使用懒加载模式
     component: () => import('../views/AboutView.vue')
@@ -36,6 +48,7 @@ const routes = [
     path:"/pagethree",
     name:"pagethree",
     component: () => import("../views/PageThree.vue"),
+    redirect:"/pagethree/child1",
     // 子路由 配置在父路由的 children 数组中
     children:[
       {
@@ -49,6 +62,13 @@ const routes = [
         component: () => import("../views/PageThreeChild2.vue")
       }
     ]
+  },{
+    path:"/home",
+    name:"home",
+    // 重定向 访问 /home 会跳转到 / 首页
+    redirect:"/",
+    // 别名 访问 /backhome 也会跳转到 / 首页
+    alias:"/backhome"
   }
 ]
 

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

@@ -3,3 +3,27 @@
     <h1>This is an about page</h1>
   </div>
 </template>
+<script>
+  export default{
+    name:"AboutView",
+    // 路由守卫 组件即将离开时调用
+    // beforeRouteLeave(to,from,next){
+    //   // 内部有三个参数
+    //   // to 即将要进入的路由对象
+    //   // from 当前正要离开的路由对象
+    //   // next 函数 必须调用 否则路由守卫会阻塞组件的离开
+    //   console.log("AboutView 组件即将离开");
+    //   console.log(to);
+    //   console.log(from);
+    //   // 只有执行 next() 方法 组件才会离开
+    //   next();
+    // },
+    // 路由守卫 组件即将进入时调用
+    // beforeRouteEnter(to,from,next){
+    //   console.log("AboutView 组件即将进入");
+    //   console.log(to);
+    //   console.log(from);
+    //   next();
+    // }
+  }
+</script>