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

 

 

1、路由配置：所有的啟動文件都在最初始的main.js文件里面，這個文件中首先需要引入：

2、路由文件配置說明：

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

this.$route.query

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

5、返回歷史記錄頁面

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

• 如何做到頁面的部分刷新，如果做到部分頁面進入的時候需要刷新，部分頁面需要緩存？

              首選需要了解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中，頁面會實現自動刷新，如下圖所示：