首页 文章

Vue-router错误：TypeError：无法读取未定义的属性'matched'

提问于
浏览 次
13

我'm trying to write my first Vuejs app. I' m使用 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>

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});
javascript vue.js vuejs2 vue-router

2 回答

  • 37

    将其添加到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)
})
    回复于
  • 2

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

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

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

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

相关问题