Vue js; Vue路由器在简单路由中不是构造函数错误

时间:2017-03-02 07:50:43

标签: laravel-5 vuejs2 vue-router

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

这是我的 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未捕获TypeError:VueRouter不是构造函数

2 个答案:

答案 0 :(得分:5)

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

这里有两个解决方案。

解决方案1:ES模块导入

在Laravel的默认配置[至少]中,vue-router应该作为es模块导入。所以,它应该在文件的顶部完成。

import VueRouter from 'vue-router'

解决方案2:CommonJS需要

由于vue-router路由器 es模块,您必须显式访问模块的CommonJS版本的default属性。

const VueRouter = require('vue-router').default;

两种解决方案

您必须使用Vue注册Vue Router。

Vue.use(VueRouter)

答案 1 :(得分:4)

根据评论最终我通过此导入解决了

import VueRouter from 'vue-router';
Vue.use(VueRouter);