互联网创业项目整合网站,做食品网站有哪些,北京海华城市建设学校网站,下沙做网站的https://github.com/woai3c/Front-end-articlesgithub.com需求一#xff1a;在一个列表页中#xff0c;第一次进入的时候#xff0c;请求获取数据。点击某个列表项#xff0c;跳到详情页#xff0c;再从详情页后退回到列表页时#xff0c;不刷新。也就是说从其他页面进…https://github.com/woai3c/Front-end-articlesgithub.com需求一在一个列表页中第一次进入的时候请求获取数据。点击某个列表项跳到详情页再从详情页后退回到列表页时不刷新。也就是说从其他页面进到列表页需要刷新获取数据从详情页返回到列表页时不要刷新。解决方案在 App.vue设置keep-alive includelistrouter-view/
/keep-alive假设列表页为 list.vue详情页为 detail.vue这两个都是子组件。我们在 keep-alive 添加列表页的名字缓存列表页。然后在列表页的 created 函数里添加 ajax请求这样只有第一次进入到列表页的时候才会请求数据当从列表页跳到详情页再从详情页回来的时候列表页就不会刷新。 这样就可以解决问题了。需求二在需求一的基础上再加一个要求可以在详情页中删除对应的列表项这时返回到列表页时需要刷新重新获取数据。我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性。 {path: /detail,name: detail,component: () import(../view/detail.vue),meta: {isRefresh: true}},
这个 meta 属性可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。设置完这个属性还要在 App.vue 文件里设置 watch 一下 $route 属性。watch: {$route(to, from) {const fname from.nameconst tname to.nameif (from.meta.isRefresh || (fname ! detail tname list)) {from.meta.isRefresh false// 在这里重新请求数据}}},
这样就不需要在列表页的 created 函数里用 ajax 来请求数据了统一放在 App.vue 里来处理。触发请求数据有两个条件从其他页面除了详情页进来列表时需要请求数据。从详情页返回到列表页时如果详情页 meta 属性中的 isRefresh 为 true也需要重新请求数据。当我们在详情页中删除了对应的列表项时就可以将详情页 meta 属性中的 isRefresh 设为 true。这时再返回到列表页页面会重新刷新。解决方案二对于需求二其实还有一个更简洁的方案那就是使用 router-view 的 key 属性。keep-aliverouter-view :key$route.fullPath/
/keep-alive首先 keep-alive 让所有页面都缓存当你不想缓存某个路由页面要重新加载它时可以在跳转时传一个随机字符串这样它就能重新加载了。 例如从列表页进入了详情页然后在详情页中删除了列表页中的某个选项此时从详情页退回列表页时就要刷新我们可以这样跳转this.$router.push({path: /list,query: { randomID: id Math.random() },
})这样的方案相对来说还是更简洁的。
