当前位置：首页 > VUE

vue 路由实现加载中

2026-01-22 03:47:36VUE

路由加载中的实现方法

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

使用路由守卫和加载状态

在路由配置中，通过beforeEach和afterEach钩子控制加载状态：

vue 路由实现加载中

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [...]
})

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

router.afterEach(() => {
  setTimeout(() => {
    store.commit('setLoading', false)
  }, 500) // 延迟关闭加载效果
})

在组件中使用v-if控制加载动画

在App.vue或布局组件中添加加载动画：

<template>
  <div id="app">
    <div v-if="isLoading" class="loading-overlay">
      <!-- 加载动画内容 -->
    </div>
    <router-view/>
  </div>
</template>

<script>
import { mapState } from 'vuex'

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

使用Vuex管理加载状态

在store中定义loading状态：

vue 路由实现加载中

// store/index.js
export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    setLoading(state, status) {
      state.isLoading = status
    }
  }
})

异步组件加载效果

对于异步组件，可以使用webpack的import语法配合加载组件：

const Foo = () => ({
  component: import('./Foo.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

全局进度条实现

使用第三方库如nprogress实现顶部进度条：

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

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

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

这些方法可以根据项目需求单独或组合使用，实现不同风格的加载效果。