在一个列表页中,第一次进入的时候,请求获取数据。
点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。
也就是说从其余页面进到列表页,须要刷新获取数据,从详情页返回到列表页时不要刷新。html
解决方案
在 App.vue
设置:vue
<keep-alive include="list"> <router-view/> </keep-alive>
假设列表页为 list.vue
,详情页为 detail.vue
,这两个都是子组件。
咱们在 keep-alive
添加列表页的名字,缓存列表页。
而后在列表页的 created
函数里添加 ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。
这样就能够解决问题了。git
在需求一的基础上,再加一个要求:能够在详情页中删除对应的列表项,这时返回到列表页时须要刷新从新获取数据。
咱们能够在路由配置文件上对 detail.vue
增长一个 meta
属性。github
{ path: '/detail', name: 'detail', component: () => import('../view/detail.vue'), meta: {isRefresh: true} },
这个 meta
属性,能够在详情页中经过 this.$route.meta.isRefresh
来读取和设置。
设置完这个属性,还要在 App.vue
文件里设置 watch 一下 $route
属性。ajax
watch: { $route(to, from) { const fname = from.name const tname = to.name if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) { from.meta.isRefresh = false // 在这里从新请求数据 } } },
这样就不须要在列表页的 created
函数里用 ajax 来请求数据了,统一放在 App.vue
里来处理。
触发请求数据有两个条件:缓存
meta
属性中的 isRefresh
为 true
,也须要从新请求数据。当咱们在详情页中删除了对应的列表项时,就能够将详情页 meta
属性中的 isRefresh
设为 true
。这时再返回到列表页,页面会从新刷新。函数