功能
像搜索功能,在点击某项进入详情页,再回到搜索界面,如果不做特殊处理,初始化到原来的状态,在vue中可以使用keep-alive缓存搜索界面,达到数据不刷新的结果。
思路
在搜索路由对象的meta添加一个keepAlive属性,值为true,表示在路由切换的时候,会被缓存。这样一来搜索界面的数据不会被初始化。
缓存界面
keepAlive如果为true,就会使用keep-alive缓存起来,否则就不会被缓存
router
{
path: '/search',
name: 'Search',
meta:{
keepAlive: true
},
component: Search
}
App.js
初始化数据
但是有时候只需要 搜索界面 进入 详情页 才需要缓存,当搜索界面进入 非详情页 时,再回到 搜索界面,希望 清除界面的 数据,可通过 vm.$data 初始化 data 数据,但此时 不能直接 赋值,vue的 data 是一个函数,因此可以 通过调用 vm.$options.data() 返回一份 原始的 data,再使用 Object.assign() 合并 vm.$data、原始data。
// 当前往首页时,初始化 data
backHome(){
// 初始化数据
Object.assign(this.$data, this.$options.data())<