Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果
需求一:
在一個(gè)列表頁(yè)中，第一次進(jìn)入的時(shí)候，請(qǐng)求獲取數(shù)據(jù)。
點(diǎn)擊某個(gè)列表項(xiàng)，跳到詳情頁(yè)，再?gòu)脑斍轫?yè)后退回到列表頁(yè)時(shí)，不刷新。
也就是說從其他頁(yè)面進(jìn)到列表頁(yè)，需要刷新獲取數(shù)據(jù)，從詳情頁(yè)返回到列表頁(yè)時(shí)不要刷新。
解決方案在 app.vue 設(shè)置:
<keep-alive include="list"> <router-view/> </keep-alive>
假設(shè)列表頁(yè)為 list.vue ,詳情頁(yè)為 detail.vue ,這兩個(gè)都是子組件。
我們?cè)?keep-alive 添加列表頁(yè)的名字，緩存列表頁(yè)。
然后在列表頁(yè)的 created 函數(shù)里添加ajax請(qǐng)求，這樣只有第一次進(jìn)入到列表頁(yè)的時(shí)候才會(huì)請(qǐng)求數(shù)據(jù)，當(dāng)從列表頁(yè)跳到詳情頁(yè)，再?gòu)脑斍轫?yè)回來的時(shí)候，列表頁(yè)就不會(huì)刷新。
這樣就可以解決問題了。
需求二:
在需求一的基礎(chǔ)上，再加一個(gè)要求：
可以在詳情頁(yè)中刪除對(duì)應(yīng)的列表項(xiàng)，這時(shí)返回到列表頁(yè)時(shí)需要刷新重新獲取數(shù)據(jù)。
我們可以在路由配置文件上對(duì) detail.vue 增加一個(gè) meta 屬性。
{
path:'/detail',
name:'detail',
component:() => import('../view/detail.vue'),
meta:{ isRefresh:true }
}
這個(gè) meta 屬性，可以在詳情頁(yè)中通過 this.$route.meta.isRefresh 來讀取和設(shè)置。 設(shè)置完這個(gè)屬性，還要在 App.vue 文件里設(shè)置 watch 一下 $route 屬性。
watch:{
$route(to, from) {
const fname = from.name
const tname = to.name
if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
// 在這里重新請(qǐng)求數(shù)據(jù)
from.meta.isRefresh = false
}
}
}
這樣就不需要在列表頁(yè)的 created 函數(shù)里用 ajax 來請(qǐng)求數(shù)據(jù)了，統(tǒng)一放在 App.vue 里來處理。
觸發(fā)請(qǐng)求數(shù)據(jù)有兩個(gè)條件：
- 從其他頁(yè)面（除了詳情頁(yè)）進(jìn)來列表時(shí)，需要請(qǐng)求數(shù)據(jù)。
- 從詳情頁(yè)返回到列表頁(yè)時(shí)，如果詳情頁(yè) meta 屬性中的 isRefresh 為 true ，也需求重新請(qǐng)求數(shù)據(jù)。
當(dāng)我們?cè)谠斍轫?yè)中刪除了對(duì)應(yīng)的列表項(xiàng)時(shí)，就可以將詳情頁(yè) meta 屬性中的 isRefresh 設(shè)為 true 。這時(shí)再返回到列表頁(yè)，頁(yè)面會(huì)重新刷新。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解如何在你的Vue項(xiàng)目配置vux，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
今天在做vue和springboot交互的一個(gè)項(xiàng)目的時(shí)候，想要基于前端實(shí)現(xiàn)一些只有登錄驗(yàn)證之后才能訪問某些頁(yè)面的操作，所以在這里總結(jié)一下實(shí)現(xiàn)該功能的一個(gè)解決方案2021-10-10
Vue3使用ref解決GetElementById為空的問題
今天遇到一個(gè)問題,就是在Vue3組件中需要獲取template中的元素節(jié)點(diǎn),使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問題,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了keep-alive不能緩存多層級(jí)路由菜單問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue關(guān)閉當(dāng)前彈窗頁(yè)面的兩種方式
這篇文章主要給大家介紹了關(guān)于Vue關(guān)閉當(dāng)前彈窗頁(yè)面的兩種方式,這是最近項(xiàng)目中遇到的一個(gè)需求,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了解讀Vue實(shí)例的屬性及模板渲染問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue中實(shí)現(xiàn)動(dòng)態(tài)更新JSON數(shù)據(jù)的三種方式
在 Vue 項(xiàng)目中動(dòng)態(tài)更新 JSON 數(shù)據(jù),可以通過以下幾種方式實(shí)現(xiàn),具體方法取決于你的需求,比如數(shù)據(jù)是存儲(chǔ)在前端還是后端、是否需要持久化等,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-04-04
Vue2的異步更新機(jī)制是基于JavaScript的事件循環(huán)機(jī)制實(shí)現(xiàn)的。nextTick方法則是在DOM更新后執(zhí)行回調(diào)函數(shù)。本文詳細(xì)介紹了Vue2的異步更新機(jī)制和nextTick原理，對(duì)于理解Vue2的渲染機(jī)制和優(yōu)化性能有很大的幫助。2023-04-04
關(guān)于vue.js中this.$emit的理解使用
本文主要介紹了關(guān)于vue.js中this.$emit的理解使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue .sync修飾符的使用,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06