laravel-5 - Vue js；Vue路由器不是简单路由中的构造函数错误

Question

我正在尝试使用官方路由库实现简单路由。

这是我的 app.js

 window.Vue = require('vue');
    window.VueRouter= require('vue-router');

    Vue.use(VueRouter);

const vt=Vue.component('example', require('./components/Example.vue'));

const router = new VueRouter({
      routes:[
        {
          path:'/test',
          component:vt
        }
    ]
})

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

但我有一个错误

app.js:11256 Uncaught TypeError: VueRouter is not a constructor

Answer 1

这个答案适用于任何希望对问题有更多了解的旁观者。

这里有两种解决方案。

方案一:ES模块导入

在 Laravel 的默认配置中 [至少]，vue-router预计将作为 es 模块导入。所以，它应该在文件的顶部完成。
import VueRouter from 'vue-router'
解决方案 2:CommonJS 要求

由于vue-router router 是一个 es 模块，你必须显式访问 default模块的 CommonJS 版本的属性。
const VueRouter = require('vue-router').default;
任一解决方案

您必须向 Vue 注册 Vue Router。
Vue.use(VueRouter)