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

Posted 2023-02-22

【中文标题】Vue路由器错误：TypeError：无法读取未定义的属性“匹配”

【英文标题】：Vue-router error: TypeError: Cannot read property 'matched' of undefined

【发布时间】：2017-11-20 23:21:29

【问题描述】：

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

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

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

这是我的代码：

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>

ma​​in.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);

【参考方案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)
)

【讨论】：

如果可以的话，我会给你 10 颗星。我在一个教程中，它没有说我们必须使用路由器作为变量名。我用的是路由器。

是的，官方文档入门指南不起作用，这个答案可以。

【参考方案2】：

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

匹配错误

解决方案

名字必须是router

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

好的

---

导入默认模块错误

import 默认模块不需要！

【参考方案3】：

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

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

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

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

【讨论】：

添加答案时，请尝试解释实际导致问题的原因，而不是仅发布可能的修复程序，让用户可以猜测实际导致问题的原因。接受的答案已经通过有关如何解决问题的相关代码解释了问题的实际原因。在我看来，您的回答对这个问题没有任何价值。

【参考方案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
  ]
);

【参考方案5】：

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

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

【参考方案6】：

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

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

【参考方案7】：

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

export default router

然后它解决了我的问题。