admin

12_vuecli/myapp/src/App.vue

@@ -7,22 +7,73 @@
       <router-link to="/mypage">MyPage</router-link>｜
       <!-- 实现路由重定向 -->
       <router-link to="/backhome">返回首页</router-link>｜
-      <router-link to="/mypage/childthree/王五/21">重定向子路由三</router-link>｜
+      <router-link to="/mypage/childthree/王五/21">重定向子路由三</router-link
+      >｜
       <!-- 别名 -->
       <router-link to="/my">我的页面</router-link>
+      <button @click="goPage">编程式导航</button>
+      <router-link to="/testcomp">组件测试</router-link>|
+    
+      <router-link to="/lovecoding">lovecoding</router-link>
     </nav>
     <!-- router-view 用来展示切换页面的地方 -->
-    <router-view/>
+    <div class="content">
+      <transition name="fade">
+        <router-view />
+      </transition>
+    </div>
   </div>
 </template>
-
+<script>
+export default {
+  methods: {
+    goPage() {
+      // $router.push 用来实现页面跳转 参数部分使用的是 router-link to属性的参数
+      // this.$router.push("/about");
+      // $router.go 用来实现页面前进后退 参数为正数表示前进 负数后退
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
 <style>
+.content{
+  position: relative;
+  width: 100vw;
+}
+.fade-enter {
+  transform: translateX(100%);
+}
+.fade-enter-active {
+  transition: all 0.5s;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+}
+.fade-enter-to {
+  transform: translateX(0);
+}
+.fade-leave {
+  transform: translateX(0);
+}
+.fade-leave-active {
+  transition: all 0.5s;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+}
+.fade-leave-to {
+  transform: translateX(-100%);
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  width: 100vw;
+  position: relative;
 }
 
 nav {

12_vuecli/myapp/src/components/TestComp1.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="comp1">
+        <h1>自定义组件一</h1>
+    </div>
+</template>

12_vuecli/myapp/src/router/index.js

@@ -51,6 +51,14 @@ const routes = [
   },{
     path:"/gochildthree/:username/:age",
     redirect:"/mypage/childthree/:username/:age"
+  },{
+    path:'/testcomp',
+    name:'testcomp',
+    component:() => import("../views/TestComp.vue")
+  },{
+    path:'*',
+    name:'error',
+    component:() => import("../views/Error.vue")
   }
 ]
 

12_vuecli/myapp/src/views/Error.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>404 页面找不到！</h1>
+    </div>
+</template>

12_vuecli/myapp/src/views/TestComp.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="test-comp">
+        <h1>组件测试页面</h1>
+        <TestComp1></TestComp1>
+    </div>
+</template>
+
+<script>
+import TestComp1 from '@/components/TestComp1.vue'
+export default {
+    components:{
+        TestComp1
+    }
+}
+</script>