首頁 > web前端 > js教程 > 解決vue單頁使用keep-alive頁面傳回不刷新的問題

解決vue單頁使用keep-alive頁面傳回不刷新的問題

亚连
發布: 2018-05-30 17:25:47
原創
2830 人瀏覽過

下面我就為大家分享一篇解決vue單頁使用keep-alive頁面返回不刷新的問題,具有很好的參考價值,希望對大家有所幫助。

使用vue單頁開發專案時遇到一個很噁心的問題:在清單頁點擊一條資料進入詳情頁,按返回鍵返回清單頁時頁面刷新了,使用者體驗非常差啊! ! !查閱了一下相關問題,用解決這個問題,以下是我的使用心得。

是Vue的內建元件,能在元件切換過程中將狀態保留在記憶體中,防止重複渲染DOM。

首先在App.vue頁面上有下面一段程式碼,我們都知道這是頁面渲染的地方

1

<router-view></router-view>

登入後複製

把這段程式碼改成如下:

1

2

3

4

<keep-alive>

<router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

登入後複製

我們可以看到這段程式碼所做的邏輯判斷,當路由的meta屬性的keepAlive屬性值為true時頁面的狀態保存,其他情況下不儲存狀態。

然後就是給我們路由設定keepAlive屬性值,例如我是給首頁(列表頁)的路由設定了keepAlive屬性為true。

1

2

3

4

5

6

7

8

9

10

11

12

{

name: &#39;index&#39;,

path: &#39;/index&#39;,

title: &#39;主页&#39;,

component(resolve) {

require([&#39;views/index.vue&#39;], resolve)

},

meta: {

pageTitle: &#39;主页&#39;,

keepAlive: true

}

}

登入後複製

這樣設定了之後,主頁的狀態就會儲存,返回鍵返回到主頁時頁面不會刷新請求資料了。

但是有問題啊! ! !從主頁跳到任何頁面,再返回主頁都不會刷新頁面!這不是我想要的,我只要從詳情頁返回列表頁時不刷新頁面,其他情況下是需要刷新的,那麼我就需要定制化處理了。大致想法就是從主頁跳到其他頁面時把主頁的keepAlive值設為false,從詳情頁返回主頁時把主頁的keepAlive值設為true就好了,代碼如下:

#主頁跳轉到其他頁面時把主頁的keepAlive值設為false

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

export default {

 data() {

 return {

 };

 },

 mounted() {

 },

 methods: {

 },

 //修改列表页的meta值,false时再次进入页面会重新请求数据。

 beforeRouteLeave(to, from, next) {

 from.meta.keepAlive = false;

 next();

 }

};

登入後複製

從詳情頁返回主頁時把主頁的keepAlive值設為true(要做個判斷,判斷是不是返回主頁的)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

export default {

 data() {

 return {

 };

 },

 mounted() {

 },

 methods: {

 },

 beforeRouteLeave(to, from, next) {

 if (to.path == "/index") {

 to.meta.keepAlive = true;

 } else {

 to.meta.keepAlive = false;

 }

 next();

 }

};

登入後複製

上面是我整理給大家的,希望未來會對大家有幫助。

相關文章:

JS中用EL表達式取得上下文參數值的方法

##JS實作左邊列表移到到右邊列表功能

js中el表達式的使用與非空判斷方法#

以上是解決vue單頁使用keep-alive頁面傳回不刷新的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - vue.js的keep-alive include無效
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue keep-alive 如何攜帶多個參數?
來自於 1970-01-01 08:00:00
0
0
0
php header問題
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue-router路由切換時的捲軸問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板