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