VUE使用NProgress

2020-05-06  本文已影响0人  KC莲

引入NProgress

npm install --save nprogress 

在路由中使用

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css'; // progress bar style

const routes = [
    {
        path: '/',
        component: () => import('@/views/home')
    },
];

const createRouter = () =>
    new VueRouter({
        mode: 'history',
        scrollBehavior: () => ({ y: 0 }),
        routes,
    });

const router = createRouter();

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

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

export default router;

上一篇 下一篇

猜你喜欢

热点阅读