Vue-router错误：TypeError：无法读取属性＆＃39;匹配＆＃39;未定义的

Question

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

当我向我的应用组件添加vue-router个链接时，我在控制台

中收到此错误

  

渲染功能出错：＆＃34; TypeError：无法读取属性＆＃39;匹配＆＃39;未定义＆＃34;

这是我的代码：

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

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

  

好

---

导入默认模块错误

  

import默认模块不需要{}！

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 { 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;