学习路由的缓存和路由的两个生命周期钩子

20_脚手架/vue_code/34.src_编程式路由导航/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="row">
+      <Banner/>
+    </div>
+    <div class="row">
+      <div class="col-xs-2 col-xs-offset-2">
+        <div class="list-group">
+          <!--          router-link 的 replace 和 push模式  设置为replace后无法后退，默认为push模式-->
+          <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
+          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
+          <!--          <a class="list-group-item active" href="./about.html">About</a>-->
+          <!--          <a class="list-group-item" href="./home.html">Home</a>-->
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <div class="panel">
+          <div class="panel-body">
+            <router-view></router-view>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Banner from "@/components/Banner.vue";
+
+export default {
+  name: "App",
+  components: {Banner}
+}
+</script>

20_脚手架/vue_code/34.src_编程式路由导航/components/Banner.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="col-xs-offset-2 col-xs-8">
+    <div class="page-header">
+      <h2>Vue Router Demo</h2>
+      <button @click="back">后退</button>
+      <button @click="forward">前进</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Banner",
+  methods: {
+    back() {
+      this.$router.back()
+    },
+    forward() {
+      this.$router.forward()
+    },
+  }
+}
+</script>

20_脚手架/vue_code/34.src_编程式路由导航/main.js

@@ -0,0 +1,23 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入VueRouter
+import VueRouter from "vue-router";
+// 引入router
+import router from "@/router";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(VueRouter)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    router: router,
+}).$mount('#app')

20_脚手架/vue_code/34.src_编程式路由导航/pages/About.vue

@@ -0,0 +1,21 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "About",
+  mounted() {
+    console.log('About组件挂着完成', this)
+    window.aboutRoute = this.$route
+    window.aboutRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('About组件即将销毁')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/34.src_编程式路由导航/pages/Detail.vue

@@ -0,0 +1,17 @@
+<template>
+  <ul>
+    <li>消息编号：{{id}}</li>
+    <li>消息标题：{{title}}</li>
+  </ul>
+</template>
+
+<script>
+
+export default {
+  name: "Detail",
+  props:['id', 'title'],
+  mounted() {
+    console.log(this.$route)
+  }
+}
+</script>

20_脚手架/vue_code/34.src_编程式路由导航/pages/Home.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h2>Home组件内容</h2>
+    <div>
+      <ul class="nav nav-tabs">
+        <li>
+          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
+        </li>
+        <li>
+          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
+        </li>
+      </ul>
+      <ul>
+        <router-view></router-view>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home",
+  mounted() {
+    console.log('Home组件挂着完成', this)
+    window.homeRoute = this.$route
+    window.homeRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('Home组件即将销毁')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/34.src_编程式路由导航/pages/Message.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="m in messageList" :key="m.id">
+        <!--        to的普通写法-->
+<!--        <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>-->
+        <!--        to的对象写法-->
+                <router-link :to="{
+                  // path: '/home/message/detail',
+                  name: 'xiangqing',
+                  query: {
+                    id: m.id,
+                    title: m.title
+                  }
+                }">
+                  {{ m.title }}
+                </router-link>
+        <button @click="pushShow(m)">push查看</button>
+        <button @click="replaceShow(m)">replace查看</button>
+      </li>
+    </ul>
+    <hr>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import detail from "@/pages/Detail.vue";
+
+export default {
+  name: "Message",
+  computed: {
+    detail() {
+      return detail
+    }
+  },
+  data() {
+    return {
+      messageList: [
+        {id: '001', title: '消息001'},
+        {id: '002', title: '消息002'},
+        {id: '003', title: '消息003'}
+      ]
+    }
+  },
+  methods:{
+    pushShow(m) {
+      // console.log(this.$router)
+      this.$router.push({
+        name: 'xiangqing',
+        query: {
+          id: m.id,
+          title: m.title,
+        }
+      })
+    },
+    replaceShow(m) {
+      this.$router.replace({
+        name: 'xiangqing',
+        query: {
+          id: m.id,
+          title: m.title,
+        }
+      })
+    }
+  }
+}
+</script>

20_脚手架/vue_code/34.src_编程式路由导航/pages/News.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <ul>
+      <li>news001</li>
+      <li>news002</li>
+      <li>news003</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "News"
+}
+</script>

20_脚手架/vue_code/34.src_编程式路由导航/router/index.js

@@ -0,0 +1,55 @@
+import VueRouter from "vue-router";
+
+// 引入组件
+import About from "@/pages/About.vue"
+import Home from "@/pages/Home.vue"
+import News from "@/pages/News.vue"
+import Message from "@/pages/Message.vue";
+import Detail from "@/pages/Detail.vue";
+
+// 创建一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            name: 'guanyu',
+            path: '/about',
+            component: About
+        },
+        {
+            path: '/home',
+            component: Home,
+            children: [
+                {
+                    path: 'news',
+                    component: News,
+                },
+                {
+                    path: 'message',
+                    component: Message,
+                    children: [
+                        {
+                            name: 'xiangqing',
+                            path: 'detail/:id/:title',
+                            component: Detail,
+                            // props的第一种写法，key-val格式，通过props的方式传给detail组件
+                            // props: {a:1,b:'hello'}
+                            // props的第二种写法，布尔值，若布尔值为真，就会把路由组件收到的params参数以props的形式传给detail
+                            // props: true
+                            // props的第三种写法，函数形式
+                            props($route) {
+                                return {
+                                    id: $route.query.id,
+                                    title: $route.query.title
+                                }
+                            }
+                            // 解构赋值的写法
+                            // props({query:{id,title}}) {
+                            //     return {id, title}
+                            // }
+                        }
+                    ]
+                }
+            ]
+        },
+    ]
+})

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="row">
+      <Banner/>
+    </div>
+    <div class="row">
+      <div class="col-xs-2 col-xs-offset-2">
+        <div class="list-group">
+          <!--          router-link 的 replace 和 push模式  设置为replace后无法后退，默认为push模式-->
+          <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
+          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
+          <!--          <a class="list-group-item active" href="./about.html">About</a>-->
+          <!--          <a class="list-group-item" href="./home.html">Home</a>-->
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <div class="panel">
+          <div class="panel-body">
+            <router-view></router-view>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Banner from "@/components/Banner.vue";
+
+export default {
+  name: "App",
+  components: {Banner}
+}
+</script>

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/components/Banner.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="col-xs-offset-2 col-xs-8">
+    <div class="page-header">
+      <h2>Vue Router Demo</h2>
+      <button @click="back">后退</button>
+      <button @click="forward">前进</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Banner",
+  methods: {
+    back() {
+      this.$router.back()
+    },
+    forward() {
+      this.$router.forward()
+    },
+  }
+}
+</script>

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/main.js

@@ -0,0 +1,23 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入VueRouter
+import VueRouter from "vue-router";
+// 引入router
+import router from "@/router";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(VueRouter)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    router: router,
+}).$mount('#app')

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/pages/About.vue

@@ -0,0 +1,21 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "About",
+  mounted() {
+    console.log('About组件挂着完成', this)
+    window.aboutRoute = this.$route
+    window.aboutRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('About组件即将销毁')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/pages/Detail.vue

@@ -0,0 +1,17 @@
+<template>
+  <ul>
+    <li>消息编号：{{id}}</li>
+    <li>消息标题：{{title}}</li>
+  </ul>
+</template>
+
+<script>
+
+export default {
+  name: "Detail",
+  props:['id', 'title'],
+  mounted() {
+    console.log(this.$route)
+  }
+}
+</script>

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/pages/Home.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h2>Home组件内容</h2>
+    <div>
+      <ul class="nav nav-tabs">
+        <li>
+          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
+        </li>
+        <li>
+          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
+        </li>
+      </ul>
+      <ul>
+        <keep-alive include="News">
+          <!--include是组件名-->
+          <!--多个组件的写法为 :include=['News','Message']-->
+          <router-view></router-view>
+        </keep-alive>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home",
+  mounted() {
+    console.log('Home组件挂着完成', this)
+    window.homeRoute = this.$route
+    window.homeRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('Home组件即将销毁')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/pages/Message.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="m in messageList" :key="m.id">
+        <!--        to的普通写法-->
+<!--        <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>-->
+        <!--        to的对象写法-->
+                <router-link :to="{
+                  // path: '/home/message/detail',
+                  name: 'xiangqing',
+                  query: {
+                    id: m.id,
+                    title: m.title
+                  }
+                }">
+                  {{ m.title }}
+                </router-link>
+        <button @click="pushShow(m)">push查看</button>
+        <button @click="replaceShow(m)">replace查看</button>
+      </li>
+    </ul>
+    <hr>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import detail from "@/pages/Detail.vue";
+
+export default {
+  name: "Message",
+  computed: {
+    detail() {
+      return detail
+    }
+  },
+  data() {
+    return {
+      messageList: [
+        {id: '001', title: '消息001'},
+        {id: '002', title: '消息002'},
+        {id: '003', title: '消息003'}
+      ]
+    }
+  },
+  methods:{
+    pushShow(m) {
+      // console.log(this.$router)
+      this.$router.push({
+        name: 'xiangqing',
+        query: {
+          id: m.id,
+          title: m.title,
+        }
+      })
+    },
+    replaceShow(m) {
+      this.$router.replace({
+        name: 'xiangqing',
+        query: {
+          id: m.id,
+          title: m.title,
+        }
+      })
+    }
+  }
+}
+</script>

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/pages/News.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <ul>
+      <li :style="{opacity}">欢迎学习Vue</li>
+      <li>news001 <input type="text"></li>
+      <li>news002 <input type="text"></li>
+      <li>news003 <input type="text"></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "News",
+  data() {
+    return {opacity: 1}
+  },
+  beforeDestroy() {
+    console.log("News即将被销毁")
+  },
+  activated() {
+    this.timer = setInterval(() => {
+      console.log("@")
+      this.opacity -= 0.01
+      if (this.opacity <= 0) this.opacity =1
+    }, 16)
+  },
+  deactivated() {
+    clearInterval(this.timer)
+  }
+}
+</script>

20_脚手架/vue_code/35_src_路由的缓存和路由的两个生命周期钩子/router/index.js

@@ -0,0 +1,55 @@
+import VueRouter from "vue-router";
+
+// 引入组件
+import About from "@/pages/About.vue"
+import Home from "@/pages/Home.vue"
+import News from "@/pages/News.vue"
+import Message from "@/pages/Message.vue";
+import Detail from "@/pages/Detail.vue";
+
+// 创建一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            name: 'guanyu',
+            path: '/about',
+            component: About
+        },
+        {
+            path: '/home',
+            component: Home,
+            children: [
+                {
+                    path: 'news',
+                    component: News,
+                },
+                {
+                    path: 'message',
+                    component: Message,
+                    children: [
+                        {
+                            name: 'xiangqing',
+                            path: 'detail/:id/:title',
+                            component: Detail,
+                            // props的第一种写法，key-val格式，通过props的方式传给detail组件
+                            // props: {a:1,b:'hello'}
+                            // props的第二种写法，布尔值，若布尔值为真，就会把路由组件收到的params参数以props的形式传给detail
+                            // props: true
+                            // props的第三种写法，函数形式
+                            props($route) {
+                                return {
+                                    id: $route.query.id,
+                                    title: $route.query.title
+                                }
+                            }
+                            // 解构赋值的写法
+                            // props({query:{id,title}}) {
+                            //     return {id, title}
+                            // }
+                        }
+                    ]
+                }
+            ]
+        },
+    ]
+})

20_脚手架/vue_code/src/App.vue

@@ -6,11 +6,11 @@
     <div class="row">
       <div class="col-xs-2 col-xs-offset-2">
         <div class="list-group">
-<!--          router-link 的 replace 和 push模式  设置为replace后无法后退，默认为push模式-->
+          <!--          router-link 的 replace 和 push模式  设置为replace后无法后退，默认为push模式-->
-          <router-link replace class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
+          <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
-          <router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link>
+          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
-<!--          <a class="list-group-item active" href="./about.html">About</a>-->
+          <!--          <a class="list-group-item active" href="./about.html">About</a>-->
-<!--          <a class="list-group-item" href="./home.html">Home</a>-->
+          <!--          <a class="list-group-item" href="./home.html">Home</a>-->
         </div>
       </div>
       <div class="col-xs-6">
@@ -26,6 +26,7 @@
 
 <script>
 import Banner from "@/components/Banner.vue";
+
 export default {
   name: "App",
   components: {Banner}

20_脚手架/vue_code/src/components/Banner.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="col-xs-offset-2 col-xs-8">
-    <div class="page-header"><h2>Vue Router Demo</h2></div>
+    <div class="page-header">
+      <h2>Vue Router Demo</h2>
+      <button @click="back">后退</button>
+      <button @click="forward">前进</button>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Banner"
+  name: "Banner",
+  methods: {
+    back() {
+      this.$router.back()
+    },
+    forward() {
+      this.$router.forward()
+    },
+  }
 }
 </script>

20_脚手架/vue_code/src/pages/Home.vue

@@ -11,7 +11,11 @@
         </li>
       </ul>
       <ul>
+        <keep-alive include="News">
+          <!--include是组件名-->
+          <!--多个组件的写法为 :include=['News','Message']-->
           <router-view></router-view>
+        </keep-alive>
       </ul>
     </div>
   </div>

20_脚手架/vue_code/src/pages/Message.vue

@@ -15,6 +15,8 @@
                 }">
                   {{ m.title }}
                 </router-link>
+        <button @click="pushShow(m)">push查看</button>
+        <button @click="replaceShow(m)">replace查看</button>
       </li>
     </ul>
     <hr>
@@ -40,6 +42,27 @@ export default {
         {id: '003', title: '消息003'}
       ]
     }
+  },
+  methods:{
+    pushShow(m) {
+      // console.log(this.$router)
+      this.$router.push({
+        name: 'xiangqing',
+        query: {
+          id: m.id,
+          title: m.title,
+        }
+      })
+    },
+    replaceShow(m) {
+      this.$router.replace({
+        name: 'xiangqing',
+        query: {
+          id: m.id,
+          title: m.title,
+        }
+      })
+    }
   }
 }
 </script>

20_脚手架/vue_code/src/pages/News.vue

@@ -1,15 +1,32 @@
 <template>
   <div>
     <ul>
-      <li>news001</li>
+      <li :style="{opacity}">欢迎学习Vue</li>
-      <li>news002</li>
+      <li>news001 <input type="text"></li>
-      <li>news003</li>
+      <li>news002 <input type="text"></li>
+      <li>news003 <input type="text"></li>
     </ul>
   </div>
 </template>
 
 <script>
 export default {
-  name: "News"
+  name: "News",
+  data() {
+    return {opacity: 1}
+  },
+  beforeDestroy() {
+    console.log("News即将被销毁")
+  },
+  activated() {
+    this.timer = setInterval(() => {
+      console.log("@")
+      this.opacity -= 0.01
+      if (this.opacity <= 0) this.opacity =1
+    }, 16)
+  },
+  deactivated() {
+    clearInterval(this.timer)
+  }
 }
 </script>