Vue 實現前進刷新，後退不刷新的效果 玩轉vue-router裏的meta

Vue 實現前進刷新，後退不刷新的效果 玩轉vue-router裏的meta。

需求一：

在一個列表頁中，第一次進入的時候，請求獲取數據。

點擊某個列表項，跳到詳情頁，再從詳情頁後退回到列表頁時，不刷新。

也就是說從其餘頁面進到列表頁，須要刷新獲取數據，從詳情頁返回到列表頁時不要刷新。

解決方案

在App.vue設置：

 

1  <keep-alive include="list">
2             <router-view/>
3   </keep-alive>

 

假設列表頁爲 list.vue，詳情頁爲 detail.vue，這兩個都是子組件。

咱們在 keep-alive 添加列表頁的名字，緩存列表頁。

而後在列表頁的 created 函數裏添加 ajax請求，這樣只有第一次進入到列表頁的時候纔會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。
這樣就能夠解決問題了。

需求二：

在需求一的基礎上，再加一個要求：能夠在詳情頁中刪除對應的列表項，這時返回到列表頁時須要刷新從新獲取數據。

咱們能夠在路由配置文件上對 detail.vue 增長一個 meta 屬性。

1  {
2            path: '/detail',
3            name: 'detail',
4            component: () => import('../view/detail.vue'),
5            meta: {isRefresh: true}
6        },

這個 meta 屬性，能夠在詳情頁中經過 this.$route.meta.isRefresh 來讀取和設置。

設置完這個屬性，還要在 App.vue 文件裏設置 watch 一下 $route 屬性。

 1 watch: {
 2        $route(to, from) {
 3            const fname = from.name
 4            const tname = to.name
 5            if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
 6                from.meta.isRefresh = false
 7                    // 在這裏從新請求數據
 8            }
 9        }
10    },

這樣就不須要在列表頁的 created 函數裏用 ajax 來請求數據了，統一放在 App.vue 裏來處理。

觸發請求數據有兩個條件：

1. 從其餘頁面（除了詳情頁）進來列表時，須要請求數據。

2. 從詳情頁返回到列表頁時，若是詳情頁 meta 屬性中的 isRefresh 爲 true，也需求從新請求數據。

 

當咱們在詳情頁中刪除了對應的列表項時，就能夠將詳情頁 meta 屬性中的 isRefresh 設爲 true。這時再返回到列表頁，頁面會從新刷新。

 

 

vue-router:meta標籤配置

 

先來看下官網連接：

https://router.vuejs.org/zh/guide/advanced/meta.html

其實官網連接給的介紹並很少，只是介紹了獲取meta的方法。

那麼咱們通常使用meta來作什麼處理呢？

其實最主要的一個，我我的認爲是攜帶頁面一些特殊的標誌，或者信息。

好比咱們上邊介紹到的頁面數據刷新，以及頁面顯示，而且能夠控制頁面內特殊dome。

下面給你們介紹下，我在開發過程當中使用到meta，來設置每一個子組件的全局背景顏色。

還有一個重要的就是，配置麪包屑。

 

meta配置各個頁面的背景色

1.首先，咱們在路由裏邊配置meta字段信息。

1 {
2     path: '/Hr-index/home',
3     name: 'home',
4     meta: [{
5       color:"#f2f2f2",
6     }],
7     
8     component: resolve => require(['文件路徑'], resolve),
9   }

你們能夠看到，我在meta裏面建立了一個color字段，這裏你就要去配置你須要的信息。

 

2.在頁面中獲取meta標籤中的信息，進行dome操做

document.getElementById(
      "el-main"
    ).style.background = this.$route.meta[0].color;

這裏呢使用document.getElementById來對標籤進行設置背景顏色，

經過this.$route能夠獲取到你配置的meta信息。

注意：

這裏若是你須要進行路由跳轉的話，必定要監聽一下，從新賦值，否則的話背景色不會動態改變。

watch: {
    $route(to, from) {
      //監聽頁面路由變化給頁面添加背景顏色
      console.log("監聽錄音",this.$route);
      if (!this.$route.meta[0].color) {
        document.getElementById("el-main").style.background = "#e9eef3";//若是沒有配置meta，給頁面一個默認顏色 return;
      } else {
           document.getElementById(
          "el-main"
        ).style.background = this.$route.meta[0].color；
      }
    }
  },

就到這裏吧，麪包屑的話，下次再給你們聊，頂不住了~

有疑惑的能夠留言哦~