美文网首页
VUE使用NProgress

VUE使用NProgress

作者: KC莲 | 来源:发表于2020-05-06 11:06 被阅读0次

引入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;

相关文章

网友评论

      本文标题:VUE使用NProgress

      本文链接:https://www.haomeiwen.com/subject/ekmightx.html