當我們在使用web應用時，我們不免會遇到頁面跳轉這樣的操作，而隨之而來的就是頁面等待時間。為了改善用戶體驗，我們可以考慮在頁面跳轉時加入loading (加載中)效果。

<template>
<div v-if="loading"><i class="loading"></i>
<span>loading...</span>
</div>
<div v-else :class="{ hide: loading }">
<!-- 頁面內容 -->
</div>
</template>
<style scoped>
.hide {
display: none;
}
.loading {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
background: url('../assets/loading.gif') no-repeat center center / contain;
}
</style>

上述代碼是Vue頁面跳轉loading的實現方式。我們首先在template中添加loading樣式，使用v-if控制loading顯示，v-else控制頁面內容顯示。最終樣式的隱藏與顯示達到切換頁面時loading的效果。同時，由于每個loading的gif動畫不同，代碼中的background屬性需要進行更換。

除了以上方法，在Vue中我們還可以使用第三方庫來實現loading效果，如在npm中搜索Vue-loading，就可找到對應的庫。

npm install vue-loading --save

安裝完成后，我們可以在需要的組件中引入庫，并添加Vue.use()實現全局注冊。

import Loading from 'vue-loading';
Vue.use(Loading);

在需要頁面跳轉loading的地方添加<Loading :active="loading" :can-cancel="false" :color="'#49c9f2'" :is-full-page="true" />即可實現loading效果，方便快捷。

總之，頁面跳轉loading不僅可以加快頁面跳轉速度，縮短用戶等待時間，也能為我們的應用增添不少美感。而Vue也為我們提供了多種實現方式，既有直接編寫代碼的方式，也有使用第三方庫的選擇，讓我們在開發應用時更加輕松自如。