使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
先掃盲,多少人和我都不知道上面的知識(shí),在keep-alive的頁(yè)面中,可以在 activated獲取this.$route.params的參數(shù)
避開(kāi)了設(shè)置keepAlive導(dǎo)致product返回的時(shí)候數(shù)據(jù)不對(duì),當(dāng)頁(yè)面進(jìn)入list的時(shí)候都是緩存狀態(tài),然后再通過(guò)是不是由index進(jìn)入來(lái)判斷是否執(zhí)行activated里的函數(shù),
list.vue
beforeRouteEnter(to, from, next) { //判斷從index頁(yè)面進(jìn)入,將list的isBack設(shè)置為true //這樣就可以請(qǐng)求數(shù)據(jù)了 if (from.name == 'index') { to.meta.isBack = true; } next(); }, activated: function () { if (this.$route.meta.isBack || this.isFirstEnter) { //清理已有商品列表的數(shù)據(jù),重新請(qǐng)求數(shù)據(jù),如果不清除的話(huà)就會(huì)有之前的商品緩存,延遲顯示最新的商品 this.proData = []; //請(qǐng)求數(shù)據(jù) this.fetchData(); } //重新設(shè)置當(dāng)前路由的isBack this.$route.meta.isBack = false; //重新設(shè)置是否第一次進(jìn)入 this.isFirstEnter = false; }, mounted: function () { //如果是第一次進(jìn)入,或者刷新操作的話(huà),也請(qǐng)求數(shù)據(jù) this.isFirstEnter = true; },
router.js
const appRouter = { mode: "history", base: "/m/", routes: [ { path: "", redirect: "/index" }, { path: "/index", name: "index", component: Index, meta: { keepAlive: true } }, { path: "/list", name: "list", component: List, meta: { keepAlive: true, isBack: false //isback是true的時(shí)候請(qǐng)求數(shù)據(jù),或者第一次進(jìn)入的時(shí)候請(qǐng)求數(shù)據(jù) } }, { path: "/product/:id", name: "product", component: Product, meta: { keepAlive: false } } ] }; Vue.use(Router); export default new Router(appRouter);
不知道有咩有幫大家理清思路,有問(wèn)題可以留言,
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com