?

常規操作：

我們通常會將通過接口請求數據的方法放在==created== 或者 ==mounted==這兩個生命周期中的一個里面調用。

但是我們知道，不管是我們剛進入這個頁面還是從其他頁面返回這個頁面，這些生命周期都會走一遍。

問題：

所以，即使你跳轉到下級頁面選好你所需的數據返回上一頁時，你所回填的數據又被從接口請求回來的數據給覆蓋了。。。，這并不是我們想要的效果！！！

使用keep-alive

不想讓頁面加載數據？？？當然可以，這時候==Keep-alive==登場了

?

vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應的組件,減少性能消耗

1、緩存所有頁面

如果你想緩存所有的頁面，只需要修改下app.vue中的代碼即可

// app.vue<template><div id="app"><keep-alive ><router-view></router-view></keep-alive><tabBar/></div></template>

2、緩存部分頁面

如果你想緩存部分頁面，有兩種方式：

(1)使用router.meta屬性

app.vue

// app.vue<template><div id="app"><keep-alive ><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view><tabBar/></div></template>

router.js

{path: '/usermanage',name: 'usermanage',meta: {keepAlive: true, //該字段表示該頁面需要緩存},component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶加載},

三、activated配合keep-alive

首先，我們需要使用router.meta屬性，修改需要緩存的組件路由如下

// keepAlive和isback這兩個很重要！ {path: '/usermanage',name: 'usermanage',meta: {keepAlive: true, //該字段表示該頁面需要緩存isBack: false, //用于判斷上一個頁面是哪個title: '人員管理'},component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶加載},

然后修改需要緩存的組件中的代碼(只放重點部分)：

<script>export default {name: 'currentName',data() {return {isFirstEnter: false, // }},beforeRouteEnter(to, from, next) {if (from.name == 'nextName') { // 這個name是下一級頁面的路由name to.meta.isBack = true; // 設置為true說明你是返回到這個頁面，而不是通過跳轉從其他頁面進入到這個頁面 }next()},mounted() {},activated() {if (!this.$route.meta.isBack || this.isFirstEnter) {this.initData() // 這里許要初始化dada()中的數據this.getDataFn() // 這里發起數據請求，（之前是放在created或者mounted中，現在只需要放在這里就好了，不需要再在created或者mounted中請求！！） }this.$route.meta.isBack = false //請求完后進行初始化this.isFirstEnter = false;//請求完后進行初始化 },} </script>

大功告成

這樣就實現了：從其他頁面跳轉到這個頁面時會請求數據，當從下級頁面返回這個頁面時就不會重新請求數據

感謝閱讀

如有問題，歡迎留言指出，一起學習，一起進步

?

轉載于:https://www.cnblogs.com/maqingyuan/p/9651678.html

總結

以上是生活随笔為你收集整理的vue 实现返回上一页不请求数据keep-alive的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。