Vue路由器錯誤：TypeError：無法讀取未定義的屬性「匹配」

Question

我試圖寫我的第一個Vuejs應用程序。我正在使用vue-cli和simple-webpack boilerplate。

當我添加vue-router鏈接到我的應用程序組件我得到這個錯誤控制檯

Error in render function: "TypeError: Cannot read property 'matched' of undefined"

這裏是我的代碼：

App.vue

<template> 
    <div> 
    <h2>Links</h2> 
    <ul> 
     <router-link to='/'>Home</router-link> 
     <router-link to='/query'>Query</router-link> 

     <router-view></router-view> 
    </ul> 
    </div> 
</template> 

<script> 
    export default {} 
</script> 

爲主。 js

個

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter) 
import routes from './routes.js' 
import App from './App.vue' 

const app = new Vue({ 
    el: '#app', 
    routes, 
    render: h => h(App) 
}) 

routes.js

import VueRouter from 'vue-router'; 
let routes=[ 
    { 
    path: '/', 
    component: require('./Components/Home.vue') 
    }, 
    { 
    path: '/query', 
    component: require('./Components/Query.vue') 
    } 
]; 

export default new VueRouter({routes}); 

Answer 1

，當你將它添加到Vue公司必須是router名稱。

import router from './routes.js' 

const app = new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
}) 

如果出於某種原因，你要撥打的變量routes你可以將其分配這樣。

import routes from './routes.js' 

const app = new Vue({ 
    el: '#app', 
    router: routes, 
    render: h => h(App) 
})