Vue Router + Element UI Loading做全局路由拦截加载动画

Vue Router和Element UI的Loading组件做一个路由跳转时，进行拦截，跳转页面时现实加载动画，完成跳转后关闭动画。

引入组件：

import { Loading } from 'element-ui';

定义加载动画：

let loading;

const startLoading = () => {
  loading = Loading.service({
    lock: true,
    spinner:'el-icon-loading',
  });
};

const endLoading = () => {
  loading.close();
};

需要在router的router.beforeEach中去加入加载动画。

router.beforeEach((to, from, next) => {
  startLoading() // 加载动画开始
  next()
  endLoading() // 加载动画关闭
})

完整的一个router加载动画示例：

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Loading } from 'element-ui';

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import( '../views/Home.vue'),
  },
  {
    path: '/page',
    name: 'Page',
    component: () => import( '../views/Page.vue'),
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import( '../views/Register.vue'),
    meta: { title: "注册"}
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import( '../views/Login.vue'),
    meta: { title: "登录" }
  }
]


let loading;

const startLoading = () => {
  loading = Loading.service({
    lock: true,
    spinner:'el-icon-loading',
  });
};

const endLoading = () => {
  loading.close();
};

const router = new VueRouter({
  mode: 'history',
  routes
})
router.beforeEach((to, from, next) => {
  startLoading() // 加载动画开始
  next()
  endLoading() // 加载动画关闭
})

export default router