■keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

  • 它有两个非常重要的属性
  • include-字符串或正则表达式:只有匹配的组件会被缓存
  • exclude-字符串或正则表达式:任何匹配的组件都不会被缓存
  • include | exclude = "组件中name的值"

■router-view也是一个组件,如果直接包在keep-alive里面,所有路径匹配到的视图组件都会被缓存

<keep-alive>
  <router-view/>
</keep-alive>
<keep-alive include="Home,About">
  <router-view/>
</keep-alive>
<keep-alive exclude="User">
  <router-view/>
</keep-alive>

其他vue-router文章

vue-router的安装和配置方式
将router修改为HTML5的history模式 & router-link的其他属性
vue的动态路由
vue的路由懒加载
vue路由的嵌套
vue-router参数传递
vue-router导航守卫
vue-router的keep-alive