Vue-Router: TypeError: this._router.init is not a

2019-08-21 01:14发布

问题:

I have vue-router installed (within Laravel project), then try to use it:

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

then I get this:

[Vue warn]: Error in beforeCreate hook: "TypeError: this._router.init is not a function"

Interestingly enough, everything was fine previously, but suddenly started getting this message.

回答1:

Replace vue with vue-loader in your Webpack config https://github.com/vuejs/vue-loader/issues/409

UPDATE

Okay, obviously you are not initializing the router in a proper way

require('./bootstrap');
import Vue from 'vue'
import VueRouter from 'vue-router'


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

let home = require('./components/Home.vue'));
let buy = require('./components/Buy.vue');
let home = require('./components/Home.vue');
let sell = require('./components/Sell.vue');
let wallet = require('./components/Wallet.vue');


const routes = [{
        path: '/',
        component: home
    },
    {
        path: '/buy',
        component: buy
    },
    {
        path: '/sell',
        component: sell
    },
    {
        path: '/wallet',
        component: wallet
    }

];

const router = new VueRouter
({
    mode: 'history',
    routes
})

Vue.use(VueRouter);

window.app = new Vue({
    el: '#app',
    router,
    render: h => h(home) 
});


回答2:

This is how my app.js looks like:

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'

Vue.use(VueRouter)

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('home', require('./components/Home.vue'));


let buy = require('./components/Buy.vue');
let home = require('./components/Home.vue');
let sell = require('./components/Sell.vue');
let wallet = require('./components/Wallet.vue');


const routes = [{
        path: '/',
        component: home
    },
    {
        path: '/buy',
        component: buy
    },
    {
        path: '/sell',
        component: sell
    },
    {
        path: '/wallet',
        component: wallet
    }

]

const router = ({
    mode: 'history',
    routes
})

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