vue跳转页面如何加Loading

在Vue中实现页面跳转时加上Loading效果可以通过以下步骤实现：

1. 首先，在main.js中引入Loading组件，并注册为全局组件。可以使用import语句引入Loading组件，然后使用Vue.component()方法注册为全局组件。

2. 在页面中使用Loading组件。在需要加上Loading效果的页面中，使用<template>标签包裹需要显示Loading的内容，并在需要显示Loading的位置使用<v-loading>标签。

3. 在导航守卫中控制Loading的显示和隐藏。在router.beforeEach()事件中，可以根据需要控制Loading的显示和隐藏。可以使用全局变量routerLoading来控制是否启用页面跳转Loading。在跳转开始时调用glo_loading.loadingShow()方法显示Loading，在跳转结束时调用glo_loading.loadingHide()方法隐藏Loading。

4. 可选：可以使用全局的loading简单封装来实现Loading的显示和隐藏。在loading.js文件中，可以定义loadingShow()和loadingHide()方法来显示和隐藏Loading。可以使用ElementUI.Loading.service()方法创建一个Loading实例，并使用loading.close()方法关闭Loading。

综上所述，实现页面跳转时加上Loading效果的代码如下所示：

// main.js
import Loading from './components/Loading.vue';
Vue.component('v-loading', Loading);

// 页面中使用Loading组件
<template>
  <div class="detail">
    <v-loading v-if="isLoading"></v-loading>
    <div class="head">向胃猛冲，芜湖起飞</div>
  </div>
</template>

// 导航守卫中控制Loading的显示和隐藏
router.beforeEach((to, from, next) => {
  routerLoading ? glo_loading.loadingShow() : '';
  // 其他逻辑...
  routerLoading ? glo_loading.loadingHide() : '';
})

// 全局loading简单封装
import ElementUI from 'element-ui';
var loading = null;
const loadingShow = () => {
  loading = ElementUI.Loading.service(loadingConfig);
}
const loadingHide = () => {
  loading.close();
}
const loadingObj = {
  loadingShow,
  loadingHide
}
export default loadingObj

希望以上解答对您有帮助。
#### 引用[.reference_title]
- *1* [VUE 跳转loading动画组件](https://blog.csdn.net/Red_sevenWord/article/details/107353923)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue项目全局配置loading（页面跳转和ajax请求）](https://blog.csdn.net/John_jian_yo/article/details/105557247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]