Vue路由器错误:TypeError:无法读取未定义的“匹配"属性 [英] Vue-router error: TypeError: Cannot read property 'matched' of undefined

问题描述

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

I'm trying to write my first Vuejs app. I'm using vue-cli and simple-webpack boilerplate.

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

When I add vue-router links to my app component I get this error in console

呈现函数中的错误:"TypeError:无法读取未定义的'匹配'属性"

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

推荐答案

将其添加到Vue中的名称​​ 必须是 router .

The name when you add it to Vue must be router.

import router from './routes.js'

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

如果出于某种原因要调用变量 routes ，则可以通过这种方式进行分配.

If, for whatever reason, you want to call the variable routes you could assign it this way.

import routes from './routes.js'

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

这篇关于Vue路由器错误:TypeError:无法读取未定义的“匹配"属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！