前进刷新后退不刷新
1.当从详情页退回列表页的时候,有时候不希望列表页刷新
// newsList 是list.vue内name属性
<keep-alive include="newsList"> <router-view/> </keep-alive>
2.有时候详情页有增删改查的需求,当我们返回列表页的时候,如果修改你了数据,还是需要重新刷新下数据
// 方案一 <keep-alive> <router-view :key="$route.fullPath"/> </keep-alive> // 详情页退回时使用 this.$router.push({ path: '/list', query: { 'randomID': 'id' + Math.random() }, }) // 方案二 { path: '/detail', name: 'detail', component: () => import('../view/detail.vue'), meta: {isRefresh: true} }, // App.vue // 当我们在详情页中删除了对应的列表项时,就可以将详情页 meta 属性中的 isRefresh 设为 true。这时再返回到列表页,页面会重新刷新 watch: { $route(to, from) { const fname = from.name const tname = to.name if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) { from.meta.isRefresh = false // 在这里重新请求数据 } } },