欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue-router 路由导航中keep-alive

程序员文章站 2022-03-25 11:15:59
...
1: keep-alive: 的使用

组件的内部的状态是没有被保留的。 如果每一次组件不想被重新创建, 把组建的内部的状态的保留下来。 
就需要使用keep-alive 

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

3: router-view: 也是一个组件, 如果直接被包含到keep-alive 里边, 所有的路径匹配到的视图组件都会被缓存起来。

切换路由的时候, 对应的单个组件就会被频繁的创建和销毁。
created() {};   生命周期中组件被创建。  
在destoryed 生命周期中 组件又会被销毁。

在生命周期中还有两个函数是:

activated() {  // 当前组件保持活跃状态

},

deactivated() {

},  // 当前组件保持不活跃状态
使用keep-alive  包裹的组件就不会被频繁的创建和销毁。
keep-alive: 有两个重要的属性
include: 字符串或者正则表达式, 只可以匹配的组件会被缓存。
exclude: 字符串或者正则表达式, 任何匹配到的数据都不会被缓存。

在App 跟组件中如果莫一个组件, 不需要被重新创建和销毁。
<keep-alive excloude='Profile, user'>

</keep-alive>

 

相关标签: vueRouter