一個方案就是利用 vue-router 導航鉤子 導航鉤子 · GitBook ，步驟如下：

1. 可以在vuex 或者 bus 中維護一個isLoading 的變數

2. 在 router.beforeEach 鉤子中 設定 isLoading = true , 在 router.afterEach 中 設定 isLoading = false

3. 在根元件（即<router-view>所在的父元件）上 放置一個Loading元件，例如：

這個 Loading元件根據這個isLoading值來決定是否顯示loading動畫。

localhost:8080/xname/1

localhost:8080/xname/2

xname.vue只created一次

怎樣才能讓1和2頁面顯示的資料不一樣呢，

嘗試了下watch $route，我的xname.vue程式碼如下：

created(){

this.fetchdata();

},

watch:{

"$route":"fetchdata"

},

methods:{

fetchdata(){

console.log("created")

}

}

但是這種方式會存在下面的問題頁面進入的時候執行了一次fetchdata，頁面離開的時候又執行了一次fetchdata，每次進入頁面都得重新整理資料，沒有快取。