vue實(shí)現(xiàn)路由不變的情況下，刷新頁(yè)面操作示例
本文實(shí)例講述了vue實(shí)現(xiàn)路由不變的情況下，刷新頁(yè)面操作。分享給大家供大家參考，具體如下：
背景1：在vue寫的后臺(tái)管理項(xiàng)目中，經(jīng)常會(huì)有增、刪、改、查的操作，這些操作只是跟用接口跟后臺(tái)交互下
既然用接口交互，那肯定就是axios的異步請(qǐng)求，那么就是說(shuō)后臺(tái)數(shù)據(jù)發(fā)生了改變，但是前臺(tái)的數(shù)據(jù)并沒(méi)有實(shí)時(shí)的更新（每次操作完后臺(tái)把列表數(shù)據(jù)重新返給你例外，但是這樣的話每次交互的數(shù)據(jù)量就偏大了）
背景2：在使用動(dòng)態(tài)路由配置 /detail/:id 這樣的情況下，由于 router-view 是復(fù)用的，單純的改變 id 的值并不會(huì)刷新 router-view
所以就要想一個(gè)辦法，讓后臺(tái)執(zhí)行完操作后，給前臺(tái)返一個(gè)操作結(jié)果，然后前臺(tái)手動(dòng)刷新頁(yè)面
一開(kāi)始我想到的是用 window.location.reload() 或者 this.$router.go(0) 這兩個(gè)方法，但是后來(lái)發(fā)現(xiàn)這兩個(gè)方法會(huì)有短暫的白屏?xí)r間，用戶體驗(yàn)并不太好，所以就放棄了，看了下別人的做法，整理下面兩種方法：
一、用中轉(zhuǎn)站的方式
這種方式意思就是讓每次操作完成以后，都讓路由跳轉(zhuǎn)到這個(gè)中轉(zhuǎn)站頁(yè)面，然后這個(gè)頁(yè)面獲取到進(jìn)來(lái)路由的路徑再返回去就可以了，這種方式可以作為解決方法之一，普遍用的還是第二種。
二、provide / inject 的方式
這種方式，就是讓通過(guò) provide 讓 App.vue 為所有子孫頁(yè)面注入一個(gè) reload 的方法，然后在需要使用的頁(yè)面，通過(guò) inject 注入即可，代碼如下：
App.vue
<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template>
<script>
export default {
name: "App",
provide() {
return {
reload: this.reload
};
},
data() {
return {
isRouterAlive: true
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(function() {
this.isRouterAlive = true;
});
}
}
};
</script>
子頁(yè)面
export default {
name: 'children',
inject: ['reload'],
data(){
return {}
}
methods: {
delData(){
//在axios成功的回調(diào)里面
this.reload();
}
}
}
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
- vue在App.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作
- antd vue 刷新保留當(dāng)前頁(yè)面路由,保留選中菜單,保留menu選中操作
- vue路由傳參頁(yè)面刷新參數(shù)丟失問(wèn)題解決方案
- Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁(yè)面刷新導(dǎo)致404錯(cuò)誤的解決
- vue 刷新之后 嵌套路由不變 重新渲染頁(yè)面的方法
- 解決vue 路由變化頁(yè)面數(shù)據(jù)不刷新的問(wèn)題
- vue router嵌套路由在history模式下刷新無(wú)法渲染頁(yè)面問(wèn)題的解決方法
- vue通過(guò)路由實(shí)現(xiàn)頁(yè)面刷新的方法
- vue 動(dòng)態(tài)添加的路由頁(yè)面刷新時(shí)失效的原因及解決方案
相關(guān)文章
插件功能開(kāi)發(fā)完成后，若需要發(fā)布到公共組件庫(kù)中（例如：npmjs），需要對(duì)插件進(jìn)行打包并發(fā)布，這篇文章主要介紹了Vue插件打包與發(fā)布的方法示例，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了基于Vue實(shí)現(xiàn)微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內(nèi)容之類的，所以用vue寫了個(gè)針對(duì)小程序用的圖文編輯器需要的朋友可以參考下2018-07-07
vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue 的鉤子函數(shù)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于在vue3.0中如何友好使用antdv的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了詳解Vue2.0配置mint-ui踩過(guò)的那些坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Vue-router 報(bào)錯(cuò)NavigationDuplicated的解決方法
這篇文章主要介紹了Vue-router 報(bào)錯(cuò)NavigationDuplicated的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
mpvue小程序循環(huán)動(dòng)畫開(kāi)啟暫停的實(shí)現(xiàn)方法
這篇文章主要介紹了mpvue小程序循環(huán)動(dòng)畫開(kāi)啟暫停的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能
本次需求是做一個(gè)視頻列表，點(diǎn)擊視頻列表播放對(duì)應(yīng)視頻；同時(shí)要求實(shí)現(xiàn)斷點(diǎn)分段上傳大文件（視頻）的功能,今天通過(guò)本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能，感興趣的朋友一起看看吧2022-12-12
在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法
這篇文章主要介紹了在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09