3、vue如何配置路由 、獲取路由的參數、部分刷新頁面、緩存頁面

 

 

一、路由配置：全部的啓動文件都在最初始的main.js文件裏面，這個文件中首先須要引入：

二、路由文件配置說明：

三、如何獲取頁面url的參數？

this.$route.query

四、頁面之間之間的跳轉？

五、返回歷史記錄頁面

六、在項目中遇到的問題：

• 如何作到頁面的部分刷新，若是作到部分頁面進入的時候須要刷新，部分頁面須要緩存？

              首選須要瞭解keep-alive,在路由配置中增長以下代碼：

{
    "path": "/test",
    "component": "test",
    "name": "test",
    "meta": {
        keepAlive: true // 須要被緩存
    }
}

         而後在app.vue裏面：

 <div>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive">
            <!-- 這裏是會被緩存的視圖組件！ -->
          </router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive">
          <!-- 這裏是不被緩存的視圖組件！ -->
        </router-view>
  </div>

新的問題：

這樣在相應的頁面就能夠作的自由緩存信息，可是如今又有一個問題：有的頁面須要部分模塊刷新，其餘地方任然緩存信息，好比有編輯地址的頁面，收件人信息須要點擊編輯按鈕進入編輯頁面進行更改而後同步到此頁面，而此頁面的其餘信息都保持頁面緩存不變，如何作到這一點呢？

解決辦法：

在須要部分刷新的頁面，將須要刷新的數據寫在activated中，頁面會實現自動刷新，以下圖所示：