admin

10_vuecli/helloworld/src/App.vue

@@ -4,14 +4,52 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/about/100">About</router-link>｜
       <!-- router-link 路由链接 组件 用于跳转到指定路由路径 -->
-       <!-- to 路由路径 用于指定转转的路由路径  使用的就是routejs中的path -->
-      <router-link to="/pageone">PageOne</router-link>
+      <!-- to 路由路径 用于指定转转的路由路径  使用的就是routejs中的path -->
+      <router-link to="/pageone">PageOne</router-link>|
+      <!-- 重定向 -->
+      <router-link to="/backhome">返回首页</router-link> |
+      <!-- 别名 -->
+      <router-link to="/info/200">Info</router-link>
+
     </nav>
-    <router-view/>
+    <!-- transition 过渡动画 -->
+     <!-- name 过渡动画的名称 -->
+    <transition name="fade">
+      <router-view />
+    </transition>
   </div>
 </template>
 
 <style>
+/* 过渡动画 */
+/* 将要进入的页面 过渡开始时候的样式 */
+.fade-enter{
+  opacity: 0;
+}
+/* 将要进入的页面 进入的过程当中 */
+.fade-enter-active{
+  transition: all 0.5s ease-in-out;
+}
+/* 将要进入的页面 进入完成的样式 */
+.fade-enter-to{
+  opacity: 1;
+  transition: all 0.5s ease-in-out;
+}
+/* 将要离开的页面 过渡开始时候的样式 */
+.fade-leave{
+  opacity: 1;
+}
+/* 将要离开的页面 离开的过程当中 */
+.fade-leave-active{
+  transition: all 0.5s ease-in-out;
+}
+/* 将要离开的页面 离开完成的样式 */
+.fade-leave-to{
+  opacity: 0;
+  transition: all 0.5s ease-in-out;
+}
+
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

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

@@ -22,6 +22,8 @@ const routes = [
   {
     path: '/about/:id',
     name: 'about',
+    // 别名 alias 路由路径
+    alias: '/info/:id',
     // 同样也表示引入页面组件 但是这里使用了异步引入（懒加载 需要显示页面的时候才加载）
     component: () => import('../views/AboutView.vue')
   },
@@ -42,6 +44,12 @@ const routes = [
         component: () => import('../views/ChildTwo.vue')
       }
     ]
+  },
+  {
+    path: '/backhome',
+    name: 'backhome',
+    // 重定向到首页 redirect 路由路径
+    redirect: '/'
   }
 ]
 

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

@@ -3,5 +3,19 @@
         <h1>ChildOne</h1>
         <p>当前路由参数id：{{ $route.params.id }}</p>
         <p>当前路由参数a：{{ $route.params.a }}</p>
+        <button @click="goHome">返回首页</button>
     </div>
-</template>
+</template>
+<script>
+export default {
+    name: 'ChildOne',
+    methods: {
+        goHome() {
+            // this.$router.push('/') 会将当前路由替换为首页
+            // push 中填写的谁的path 就会跳转那个页面
+            // 之前跳转页面to 后边写的什么 push 就可以写什么
+            this.$router.push('/');
+        }
+    }
+}
+</script>