NProgress 未在 Vue 路由器中定义

Question

app.js

const app = new Vue({
    el: '#wrapper',
    router,
    store
});

router.js

  const router = new VueRouter({
    routes,
    hashbang: false,
    mode: 'history',

})

router.beforeEach((to, from, next) => {
    NProgress.start()
    NProgress.set(0.1)
    next()
})
router.afterEach(() => {
    setTimeout(() => NProgress.done(), 500)
})

错误

NProgress is not defined

我已经使用 npm 安装了 vue-nprogress，但它仍然显示未定义。如何解决这个问题？提前致谢！

Answer 1

在main.js文件中导入并使用插件如下：

...

import NProgress from 'vue-nprogress'

 
Vue.use(NProgress)
 
const nprogress = new NProgress()
 
const app = new Vue({
    el: '#wrapper',
    router,
    store,
    nprogress
});

然后在 router.js 中使用 router.app.$nprogress 访问该实例：

 const router = new VueRouter({
    routes,
    hashbang: false,
    mode: 'history',

})

router.beforeEach((to, from, next) => {
    router.app.$nprogress.start()
    router.app.$nprogress.set(0.1)
    next()
})
router.afterEach(() => {
    setTimeout(() => router.app.$nprogress.done(), 500)
})

NProgress 未在 Vue 路由器中定义

NProgress is not defined in Vue router

vue.js

vue-router

vuejs2

vue-nprogress