vue页面详情页返回列表页_vue列表页进入详情页，返回列表项不刷新

功能

像搜索功能，在点击某项进入详情页，再回到搜索界面，如果不做特殊处理，初始化到原来的状态，在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())<