Install nprogress.
npm install nprogress --save
Add its CSS
main.js
import '../node_modules/nprogress/nprogress.css'
Follow the router.js file above for Router.
| import Vue from 'vue' | |
| import VueRouter from 'vue-router' | |
| import NProgress from 'nprogress'; | |
| import Home from '../views/Home.vue' | |
| Vue.use(VueRouter) | |
| const routes = [ | |
| { | |
| path: '/', | |
| name: 'home', | |
| component: Home, | |
| meta: { | |
| requiresGuest: true | |
| } | |
| }, | |
| ] | |
| const router = new VueRouter({ | |
| mode: 'history', | |
| base: process.env.BASE_URL, | |
| routes | |
| }) | |
| router.beforeResolve((to, from, next) => { | |
| // If this isn't an initial page load. | |
| if (to.name) { | |
| // Start the route progress bar. | |
| NProgress.start() | |
| } | |
| next() | |
| }) | |
| router.afterEach(() => { | |
| // Complete the animation of the route progress bar. | |
| NProgress.done() | |
| }) | |
| export default router |
Uncaught SyntaxError: The requested module '/node_modules/nprogress/nprogress.js?v=33fb856e' does not provide an export named 'default' (at index.js:4:8)