当前位置：首页 > VUE

vue 路由实现加载中

2026-02-22 18:50:29VUE

vue 路由实现加载中效果的方法

在 Vue 项目中，可以通过路由守卫和全局状态管理实现加载中的效果。以下是几种常见的方法：

使用路由守卫和加载状态

在路由配置文件中，通过 beforeEach 和 afterEach 钩子控制加载状态的显示与隐藏。结合 Vuex 或 Pinia 管理全局加载状态。

// router/index.js
import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  store.commit('setLoading', true)
  next()
})

router.afterEach(() => {
  store.commit('setLoading', false)
})

在组件中使用加载动画

在根组件或布局组件中，通过 v-if 或 v-show 控制加载动画的显示。加载状态可以从 Vuex 或 Pinia 中获取。

vue 路由实现加载中

<template>
  <div>
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
    <router-view />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['isLoading'])
  }
}
</script>

结合异步组件和 Suspense

Vue 3 的 Suspense 组件可以更方便地处理异步加载状态。在路由配置中使用动态导入，结合 Suspense 显示加载中效果。

<template>
  <Suspense>
    <template #default>
      <router-view />
    </template>
    <template #fallback>
      <div class="loading">Loading...</div>
    </template>
  </Suspense>
</template>

自定义加载进度条

vue 路由实现加载中

使用第三方库如 nprogress 在路由跳转时显示进度条。在路由守卫中调用 NProgress.start() 和 NProgress.done()。

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

优化加载体验

对于较慢的路由加载，可以设置延迟显示加载动画，避免闪烁。使用 setTimeout 或自定义逻辑控制加载状态的显示时机。

router.beforeEach((to, from, next) => {
  const timer = setTimeout(() => {
    store.commit('setLoading', true)
  }, 300)
  next()
})

router.afterEach(() => {
  clearTimeout(timer)
  store.commit('setLoading', false)
})

以上方法可以根据项目需求灵活组合使用，确保用户在路由切换时有良好的加载体验。