0%

vue-router&keep-alive

keep-alive:保留组件的状态。换句话说,keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或者避免重新渲染。

  1. activated/deactivated函数需要在keep-alive下使用才能生效。
  2. 当存在路由嵌套时,如何保留组件的状态?
    需要用到beforeRouteLeave(to, from, next){}函数,组件的嵌套情况如下:
    在这里插入图片描述
    在home.vue文件中添加如下代码:
    在这里插入图片描述
    当然,需要把<router-view/>放在<keep-alive>标签中:打开App.vue
    在这里插入图片描述
  3. keep-alive的两个属性
  • exclude——匹配的组件不会被缓存
    有些时候不需要把全部的组件状态都进行保留,有些特别的组件可能就需要不断被创建,被销毁,然后在被创建 ,就需要用到exclude
    在这里插入图片描述
    将对应组件的name的值加入即可,如果是多个,用逗号分隔
    • include——匹配的组件会被缓存