VueJS vue-router-keep-alive

参考链接:

在点击切换的时候,组件内部的状态是没有保存下载的,所以现在需要使用这个,可以让用户在切换的时候,保存页面状态

keep-alive

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

router-view

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

如何在切换页面的时候,可以不重新渲染呢。

1.在页面的router-view 外层中,包裹一层keep-alive。
2.在页面的组件中,使用路有导航

如何在切换页面的时候,大部分组件都渲染,而一部分组件不渲染呢。

1.在keep-alive的include和exclude里面去做

  • include:字符串或者正则表达式,只有匹配的组件会被缓存
  • exclude:字符串或正则表达式,任何匹配的组件都不会被缓存
posted @ 2020-03-22 11:30  Alex_Mercer  阅读(222)  评论(0编辑  收藏  举报