vue

vue/vue高阶/project/src/App.vue

@@ -27,7 +27,7 @@
                   参数：query对象中
       -->
     <div class="header">
-      <router-link active-class="active" class="text" :to="{
+      <router-link push active-class="active" class="text" :to="{
         name:'jia',
         query:{
           id:777,
@@ -35,8 +35,8 @@
         }
       }">首页</router-link>
     <!-- <router-link active-class="active" class="text" :to="`/home?id=6666&title=你好`">首页</router-link> -->
-    <!-- <router-link replace active-class="active" class="text" :to="{path:'/home'}">首页</router-link> -->
-    <!-- <router-link replace active-class="active" class="text" :to="{name:'jia'}">首页</router-link> -->
+    <!-- <router-link push active-class="active" class="text" :to="{path:'/home'}">首页</router-link> -->
+    <!-- <router-link push active-class="active" class="text" :to="{name:'jia'}">首页</router-link> -->
 
     <!--
       2.params传参
@@ -52,15 +52,15 @@
 
       -->
 
-      <router-link replace active-class="active" class="text" :to="{
+      <router-link push active-class="active" class="text" :to="{
         name:'liebiao',
         params:{
           id:555,
           hobby:'画画'
         }
       }">列表</router-link>
-    <!-- <router-link replace active-class="active" class="text" :to="`/list/999/画画`">列表</router-link> -->
-    <router-link replace active-class="active" class="text" to="/my">我的</router-link>
+    <!-- <router-link push active-class="active" class="text" :to="`/list/999/画画`">列表</router-link> -->
+    <router-link push active-class="active" class="text" to="/my">我的</router-link>
     </div>
     <!-- 占位标签 -->
     <div class="main">

vue/vue高阶/project/src/components/Part1.vue

@@ -1,11 +1,33 @@
 <template>
   <div class="part1">
-    <h1>这是画画专栏</h1>
+    <h1 :style="{opacity:opacity}">这是画画专栏</h1>
+    <input type="text" placeholder="请输入绘画作品">
   </div>
 </template>
 
 <script>
 export default {
+    name:'Part1',
+    data() {
+        return {
+            opacity: 1,
+            timer: ''
+        }
+    },
+    // keep-alive 自带的生命周期钩子 
+    // 激活的
+    activated() {
+        console.log("激活了")
+        this.timer = setInterval(()=>{
+            this.opacity -= 0.1;
+            if(this.opacity <= 0) this.opacity = 1;
+        },100)
+    },
+    // 未激活的
+    deactivated() {
+        console.log("未激活了")
+        clearInterval(this.timer)
+    }
 
 }
 </script>

vue/vue高阶/project/src/components/Part2.vue

@@ -1,15 +1,14 @@
 <template>
-    <div class="part2">
-      <h1>这是舞蹈专栏</h1>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-  
-  }
-  </script>
-  
-  <style>
-  
-  </style>
+  <div class="part2">
+    <h1>这是舞蹈专栏</h1>
+    <input type="text" placeholder="请输入舞蹈作品" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part2",
+};
+</script>
+
+<style></style>

vue/vue高阶/project/src/router/index.js

@@ -38,7 +38,8 @@ const routes = [
       // 子集路径配置不要: /
       {
         path:'part1',
-        component: Part1,
+        // 路由懒加载  () => import("@/components/Part1.vue")
+        component: () => import("@/components/Part1.vue")
       },
       {
         path:'part2',

vue/vue高阶/project/src/views/Home.vue

@@ -5,8 +5,18 @@
         <router-link active-class="ha" to="/home/part1" class="hobby">画画</router-link>
         <router-link active-class="ha" to="/home/part2" class="hobby">舞蹈</router-link>
     </div>
+    
     <div class="main">
-        <router-view></router-view>
+        <!-- keep-alive 组件缓存
+            include 控制保留那个组件内容的属性
+         -->
+        <!-- <keep-alive include="Part1">
+            <router-view></router-view>
+        </keep-alive> -->
+        <!-- 多个存储 -->
+        <keep-alive :include="['Part1']">
+            <router-view></router-view>
+        </keep-alive>
     </div>
   </div>
 </template>

vue/vue高阶/project/src/views/My.vue

@@ -1,12 +1,24 @@
 <template>
   <div class="my">
     我的
+    <!-- 编程式导航 -->
+    <h3 @click="$router.push('/home')">笑笑</h3>
+    <!-- <h3 @click="goToList">笑笑</h3> -->
+    <button @click="$router.back()">后退</button>
+    <button @click="$router.forward()">前进</button>
+    <button @click="$router.go(-2)">按钮</button>
   </div>
 </template>
 
 <script>
 export default {
-
+  methods:{
+    goToList() {
+      // $router 编程式导航
+      this.$router.replace('/home')
+      // this.$router.push('/home')
+    }
+  }
 }
 </script>