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)
})

在Vue路由器中未定义NProgress

1 个答案: