Vuejs学习笔记(三)-20.keep-alive标签的使用

keep-alive保持活跃，这个如何使用？先看一些例子

一、在组件中使用生命周期回调函数

created(),destoryed(*),activated(),deactivated()

分别是创建，销毁，活跃，不活跃。

Home.vue中定义这4个函数

 

 

 

<template>
  <div>
    <h2>我是首页</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/messages">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  created(){
    // document.title = '首页'
    console.log('created');
  },
  destroyed(){
    console.log('destoryed');
  },
  activated(){
    console.log('activated');
  },
  deactivated(){
    console.log('deactivated');
  }
}
</script>

<style scoped>

</style>

此时打开页面，在首页和其他页面之间进行跳转

测试步骤：

1.如果点击首页，就表示Home页面组件已创建，因此有created()调用情况。其他三种没有。

2.切换到首页内的消息和新闻，也不调用任何函数。

3.切换到其他页，如切换到关于后，会调用destoryed()，表示Home组件被销毁。

二、保持组件不被销毁

需求：希望首页点击消息后，切换到别的页面，再切换回来，仍然显示首页-消息组件

这个时候需要用到keep-alive

测试步骤：

1.在App.vue中的<router-view>标签外部使用<keep-alive>标签

 

 

 

 

 

代码如下：

<template>
  <div>
    <router-link to="/home" replace>首页</router-link>
    <router-link to="/about" replace>关于</router-link>
    <router-link :to="'/user/'+userName" replace>用户</router-link>
<!--    <router-link :to="{path:'/profile',query:{name:'invoker',age:1000,skillcount:10}}">档案</router-link>-->
    <button @click="profileClick">档案</button>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      userName:'invoker'
    }
  },
  methods:{
    profileClick(){
      this.$router.replace({
        path:'/profile',
        query:{
          name:'invoker',
          age:1000,
          skillcount:10
        }
      })
    }
  }

}
</script>

<style>

</style>

2.此时再来看前端Home组件在切换时是否destroyed()，应该是不会销毁的，被保持了。

由此得出结果，keep-alive在App.vue中保持了所有组件的活跃状态。不会重复创建新的组件。

 

为了完成这个需求，需要使用到组件内部守卫 beforeRouteLeave(to,from,next)

 

Home.vue组件中

1.在activated()函数中将当前路由地址传给路由路径栈中。

2.在离开当前组件时，组件守卫 beforeRouteLeave(to,from,next)中奖当前组件付给该组件当前路径。

 

 

<template>
  <div>
    <h2>我是首页</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/messages">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  created(){
    // document.title = '首页'
    console.log('created');
  },
  destroyed(){
    console.log('destoryed');
  },
  activated(){
    console.log('activated');
    this.$router.push(this.path)
  },
  deactivated(){
    console.log('deactivated');
  },
  beforeRouteLeave(to,from,next){
    this.path = this.$route.path
    next()
  }
}
</script>

<style scoped>

</style>

 

3.修改router/index.js中的默认路径

 

 

代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 路由的懒加载
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const HomeMessages = ()=>import('../components/HomeMessages')
const HomeNews = ()=>import('../components/HomeNews')
const Profile = ()=>import('../components/Profile')

Vue.use(VueRouter)

const routes = [
  // {
  //   path: '',
  //   redirect: '/home'
  // },
  {
    path: '/home',
    component: Home,
    meta:{
      title:'首页'
    },
    children:[
      {
        path:'',
        redirect:'news'
      },
      {
        path:'news',
        component:HomeNews
      },
      {
        path:'messages',
        component:HomeMessages
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta:{
      title:'关于'
    }
  },
  {
    path: '/user/:userName1',
    component: User,
    meta:{
      title:'用户'
    }
  },
  {
    path:'/profile',
    component: Profile,
    meta:{
      title:'档案'
    }
  }
]

const router = new VueRouter({
  routes,
  mode:'history'
})
//全局前置守卫
router.beforeEach((to,from,next)=>{
  document.title = to.matched[0].meta.title
  next()
})
//全局后置钩子
router.afterEach((to,from)=>{
  // 没有next
  // console.log(to);
  // console.log(from);
})

export default router

页面效果，离开首页新闻或则首页消息后，再切回来时，仍然显示离开首页的地址。

 三、可以选择哪些组件保持活跃，哪些组件不保持活跃，使用keep-alive的属性 include,exclude.

1.所有组件添加生命周期回调函数。

about组件

 

 home组件：

 

 Profile组件：

 

 User组件：

 

 需求：若希望部分组件保持活跃，部分组件不保持活跃，需要在App.vue文件中修改keep-alive的属性

 

 

这样设置后，Profile每次点击，都会销毁，而其他组件每次点击，不会被销毁。