vue 生命周期 返回不触发_Vue生命周期activated之返回上一页不重新请求数据操作...
activated: 英文原意：使活動、觸發(fā)
在Vue的生命周期函數(shù)中，這個好像用的不是特別多？(也許只是在我的工作中這個用的不多，或者說叫幾乎不用這個)
一、需求
前不久在項目中有這樣一個需求：
在訂單頁面的地址信息欄，默認通過接口填充了一個已經(jīng)設(shè)置過的一個的默認地址，現(xiàn)在要跳轉(zhuǎn)去地址列表重新選擇一個地址并回填到訂單頁面的地址信息位置
二、嘗試
常規(guī)操作：
我們通常會將通過接口請求數(shù)據(jù)的方法放在==created== 或者 ==mounted==這兩個生命周期中的一個里面調(diào)用。
但是我們知道，不管是我們剛進入這個頁面還是從其他頁面返回這個頁面，這些生命周期都會走一遍。
問題：
所以，即使你跳轉(zhuǎn)到下級頁面選好你所需的數(shù)據(jù)返回上一頁時，你所回填的數(shù)據(jù)又被從接口請求回來的數(shù)據(jù)給覆蓋了。。。，這并不是我們想要的效果！！！
三、使用keep-alive
不想讓頁面加載數(shù)據(jù)？？？當(dāng)然可以，這時候==Keep-alive==登場了
vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗
1、緩存所有頁面
如果你想緩存所有的頁面，只需要修改下app.vue中的代碼即可
// app.vue
2、緩存部分頁面
如果你想緩存部分頁面，有兩種方式：
(1)使用router.meta屬性
app.vue
// app.vue
router.js
{
path: '/usermanage',
name: 'usermanage',
meta: {
keepAlive: true, //該字段表示該頁面需要緩存
},
component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶加載
},
(2)使用vue-router 2.0的新特性
2.0提供了include/exclude兩個屬性 可以針對性緩存相應(yīng)的組件
app.vue
==注意==：上面代碼中的a,b是需要緩存的組件的name屬性值，不是路由的name值
使用keep-alive結(jié)論
當(dāng)你第一進入需要緩存的頁面后，頁面數(shù)據(jù)被緩存下來，但是當(dāng)你再次進入時，你會發(fā)現(xiàn)，頁面的數(shù)據(jù)還是之前的數(shù)據(jù)。。。。這也不是我們想要的效果！！！！
四、activated配合keep-alive
首先，我們需要使用router.meta屬性，修改需要緩存的組件路由如下
// keepAlive和isback這兩個很重要！
{
path: '/usermanage',
name: 'usermanage',
meta: {
keepAlive: true, //該字段表示該頁面需要緩存
isBack: false, //用于判斷上一個頁面是哪個
title: '人員管理'
},
component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶加載
},
然后修改需要緩存的組件中的代碼(只放重點部分)：
export default {
name: 'currentName',
data() {
return {
isFirstEnter: false, //
}
},
beforeRouteEnter(to, from, next) {
if (from.name == 'nextName') { // 這個name是下一級頁面的路由name
to.meta.isBack = true; // 設(shè)置為true說明你是返回到這個頁面，而不是通過跳轉(zhuǎn)從其他頁面進入到這個頁面
}
next()
},
mounted() {
},
activated() {
if (!this.$route.meta.isBack || this.isFirstEnter) {
this.initData() // 這里許要初始化dada()中的數(shù)據(jù)
this.getDataFn() // 這里發(fā)起數(shù)據(jù)請求，(之前是放在created或者mounted中，現(xiàn)在只需要放在這里就好了，不需要再在created或者mounted中請求！！)
}
this.$route.meta.isBack = false //請求完后進行初始化
this.isFirstEnter = false;//請求完后進行初始化
},
}
大功告成
這樣就實現(xiàn)了：從其他頁面跳轉(zhuǎn)到這個頁面時會請求數(shù)據(jù)，當(dāng)從下級頁面返回這個頁面時就不會重新請求數(shù)據(jù)
以上這篇Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持我們。
時間： 2020-07-24
總結(jié)
以上是生活随笔為你收集整理的vue 生命周期 返回不触发_Vue生命周期activated之返回上一页不重新请求数据操作...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： xampp 可道云_Windows下用k
- 下一篇： vuejs2.0 数组操作 提示Can