Vue-router error: TypeError: Cannot read property 'matched' of undefined

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>

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

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

Answer 2

在我的 Vue 文件中，我有以下代码：

然后，我修改了我的 app.js 文件，并放置了以下代码：

import router from './Router/router.js'

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

Answer 3

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

匹配错误

解决方案

name must be router

OK

导入默认模块错误

import default module no need {}!

Answer 4

除此之外，如果您将路由放在同一页面中而不是导入它，则必须在 Vue 组件渲染之前声明它。

像这样:-

const router = new VueRouter({
  mode: 'history',
  routes:[
    { path: '/dashboard', component: Dashboard},
    { path: '/signin', component: Signin}
  ]
});

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

不是这样的:

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

const router = new VueRouter({
  mode: 'history',
  routes:[
    { path: '/dashboard', component: Dashboard},
    { path: '/signin', component: Signin}
  ]
});

Answer 5

只是为了添加导致此问题的错字。我忘记了 import

上的 {}

import { router } from './routes.js'  //correct
import router from './routes.js'   //causes same error

Answer 6

如果你在router/index.js中放一些自定义代码，确保最后仍然导出默认路由器。

const router = new Router({
  mode: 'history'
});
export default router;

Answer 7

我遇到过和你一样的问题。然后我意识到在 index.js 的末尾我忘了添加 :

export default router

然后它解决了我的问题。

Vue-router error: TypeError: Cannot read property 'matched' of undefined

Vue-router error: TypeError: Cannot read property 'matched' of undefined

javascript

vue.js

vue-router

vuejs2

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

匹配错误

解决方案

导入默认模块错误