您好,登錄后才能下訂單哦!
本文實(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ì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。