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

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

需求一：

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

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

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

解決方案

在App.vue設置：

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

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

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

然后在列表頁的 created 函數里添加 ajax請求，這樣只有第一次進入到列表頁的時候才會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。
這樣就可以解決問題了。

需求二：

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

我們可以在路由配置文件上對 detail.vue 增加一個 meta 屬性。

 {
           path: '/detail',
           name: 'detail',
           component: () => import('../view/detail.vue'),
           meta: {isRefresh: true}
       },

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

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

watch: {
       $route(to, from) {
           const fname = from.name
           const tname = to.name
           if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
               from.meta.isRefresh = false
                   // 在這里重新請求數據
           }
       }
   },

這樣就不需要在列表頁的 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字段信息。

{
    path: '/Hr-index/home',
    name: 'home',
    meta: [{
      color:"#f2f2f2",
    }],
    
    component: resolve => require(['文件路徑'], resolve),
  }

大家可以看到，我在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；
      }
    }
  },

就到這里吧，面包屑的話，下次再給大家聊，頂不住了~

有疑惑的可以留言哦~