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>
上一篇: vue-router 路由的认识