VUE 返回上一頁 不刷新頁面

應用場景：

　　當前我有一個列表頁一個詳情頁，我希望我進入詳情頁以后再返回列表頁時，列表頁仍然能保留我進入詳情頁前的樣子

解決方法：

1、我們需要在router設置中添加keep-alive屬性

{
            isShow: true,
            permissionCode:"Meeting_Approve",
            icon: "",
            title: "會議審批",
            path: 'approvalManOfMeetings',
            name: 'approvalManOfMeetings',
            meta: {
                keepAlive: true    //true為需要緩存，false為不需要緩存（不需要的也可以不加）
            },
            component: () => import('./approvalManOfMeetings.vue')
        },

2、 在App.vue中為不需要刷新的路由添加keep-alive組件，最后修改成如下模樣：

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

3、當我們需要從詳情頁返回到列表頁的時候，詳情頁中只有使用this.$router.back()進行返回，我們想要的返回后列表頁不刷新的效果才能生效

注：我在使用過程中注意到，當我不小心把詳情頁的路由配置頁也加上了 keepAlive: true 以后，返回列表頁后仍然被刷新了。暫時還沒深究其中的問題，但是如果遇到相同問題的小伙伴可以試着查一下是不是因為這個原因導致返回后緩存失效頁面被刷新。

 

 

在使用過程中我發現一個問題，就是部分頁面在點擊左側菜單欄時會導致整個頁面大刷新，給人的感覺就不是很好嘛，頁面之間的過渡不是很流暢，最后發現是由於keep-alive導致的，最后研究了一下發現原來keep-alive還有另一種寫法。

由於我當前的項目用的是多重嵌套，所以在嵌套超過兩層以后，就需要在每一層的router-view標簽外再套一層keep-alive標簽，否則會造成keepAlive失效。

因此除了在App.vue的頁面上加keep-alive以外，其他使用router-view標簽的地方也需要套keep-alive標簽，修改如下

App.vue頁面：

<template>
  <div id="app">
    <!-- <router-view></router-view> -->
    <keep-alive include="keepAlive">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<style scoped>
@import url("./assets/app.css");
</style>

嵌套頁面：

<template>
  <div id="notManagement-div">
    <!-- <router-view></router-view> -->
    <keep-alive include="keepAlive">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

Props

• include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
• exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
• max - 數字。最多可以緩存多少組件實例。

具體說明可參考官網： https://cn.vuejs.org/v2/api/#keep-alive

 

由於我前面定義的需要緩存的組件名字為 keepAlive ，所以我只需要把需要緩存的vue頁面的name值改為keepAlive就好，這個時候就不需要像上面那個方法一樣還要去router里面設置當前頁面的keepAlive屬性了。