您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何在vue中使用keep-alive請求數(shù)據(jù),內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
鉤子函數(shù)的執(zhí)行順序
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
先掃盲,多少人和我都不知道上面的知識,在keep-alive的頁面中,可以在 activated獲取this.$route.params的參數(shù)
避開了設置keepAlive導致product返回的時候數(shù)據(jù)不對,當頁面進入list的時候都是緩存狀態(tài),然后再通過是不是由index進入來判斷是否執(zhí)行activated里的函數(shù),
list.vue
beforeRouteEnter(to, from, next) { //判斷從index頁面進入,將list的isBack設置為true //這樣就可以請求數(shù)據(jù)了 if (from.name == 'index') { to.meta.isBack = true; } next(); }, activated: function () { if (this.$route.meta.isBack || this.isFirstEnter) { //清理已有商品列表的數(shù)據(jù),重新請求數(shù)據(jù),如果不清除的話就會有之前的商品緩存,延遲顯示最新的商品 this.proData = []; //請求數(shù)據(jù) this.fetchData(); } //重新設置當前路由的isBack this.$route.meta.isBack = false; //重新設置是否第一次進入 this.isFirstEnter = false; }, mounted: function () { //如果是第一次進入,或者刷新操作的話,也請求數(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ù)據(jù),或者第一次進入的時候請求數(shù)據(jù) } }, { path: "/product/:id", name: "product", component: Product, meta: { keepAlive: false } } ] }; Vue.use(Router); export default new Router(appRouter);
上述內(nèi)容就是如何在vue中使用keep-alive請求數(shù)據(jù),你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。