[JavaScript知识库]路由组件的生命周期函数：actived和deactived

先说结论：<keep-alive>包裹的路由组件，该组件有两个特有的生命周期函数：activated和deactivated。其中，activated在路由组件被激活时触发；deactivated在路由组件失活时触发。

看具体的例子。项目目录如下。

• 一般组件components/Banner.vue

<template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
            <h2>Vue Router Demo</h2>
        </div>
    </div>
</template>

<script>
export default {
    name:"Banner"
}
</script>

<style>

</style>

• 路由组件pages/Home.vue

<template>
  <div>
    <h2>Home组件内容</h2>
    <div :style="{opacity}">欢迎来到我们的网站！</div>
  </div>
</template>

<script>
export default {
    name:'Home',
    data(){
      return {
        opacity:1
      }
    },
    activated(){
      console.log("Home组件被激活了");
      this.timer = setInterval(() => {
        this.opacity -= 0.01;
        if(this.opacity < 0){
          this.opacity = 1;
        }
      },16)
    },
    deactivated(){
      console.log("Home组件失活了");
      clearInterval(this.timer);
    }
}
</script>

<style>

</style>

• 路由组件pages/About.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
    name:'About'
}
</script>

<style>

</style>

• 路由器router/index.js

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home
        }
    ]
})

• App.vue

<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 to="/about" active-class="active" class="list-group-item">About</router-link>
          <router-link to="/home" active-class="active" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner.vue";

export default {
  name: 'App',
  components:{
    Banner
  }
}
</script>

• 入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";

import router from "./router/index";

Vue.config.productionTip = false;

Vue.use(VueRouter);

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

• 重启应用，测试效果。