Vue路由器错误：TypeError：无法读取未定义的属性“匹配”

Question

我正在尝试编写我的第一个 Vuejs 应用程序。我正在使用 vue-cli 和 simple-webpack 样板。

当我添加 vue-router 链接到我的应用程序组件时，我在控制台中收到此错误

渲染函数中的错误：“TypeError：无法读取未定义的属性‘匹配’”

这是我的代码：

应用程序.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>

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

路由.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});

原文由 Mohammad Reza 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

vue & vue router & match bug & 解决方案

匹配错误

解决方案

名称必须是 router

https://stackoverflow.com/a/44618867/5934465

好的

---

导入默认模块错误

import 默认模块不需要 {} ！

原文由 xgqfrms 发布，翻译遵循 CC BY-SA 4.0 许可协议