vue 切换路由时loading

你可以在 Vue Router 中使用 Navigation Guards 来实现路由切换时的 loading 效果。具体做法如下：

1. 在你的 Vue 组件中添加一个 loading 状态，用于控制 loading 效果的显示和隐藏。

2. 在 Vue Router 中定义一个前置守卫（beforeEach），用于在路由切换时改变 loading 状态。

3. 在 Vue Router 中定义一个后置守卫（afterEach），用于在路由切换完成后恢复 loading 状态。

下面是一个简单的示例代码：

// App.vue
<template>
  <div>
    <router-view></router-view>
    <div v-show="loading" class="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    };
  },
};
</script>

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

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue'),
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue'),
    },
  ],
});

router.beforeEach((to, from, next) => {
  // 显示 loading
  router.app.loading = true;
  next();
});

router.afterEach(() => {
  // 隐藏 loading
  router.app.loading = false;
});

export default router;

在上面的示例中，我们在 App.vue 组件中添加了一个 loading 状态，并使用 v-show 指令控制其显示和隐藏。在 router/index.js 文件中，我们定义了一个前置守卫，用于在路由切换时显示 loading，同时定义了一个后置守卫，用于在路由切换完成后隐藏 loading。这样就可以实现路由切换时的 loading 效果了。