web-dev-qa-db-ja.com

Vueルーターエラー：TypeError：未定義のプロパティ 'matched'を読み取ることができません

最初のVuejsアプリを作成しようとしています。 vue-cliと simple-webpackボイラープレート を使用しています。

アプリコンポーネントにvue-routerリンクを追加すると、コンソールにこのエラーが表示されます

レンダリング関数のエラー： "TypeError：未定義のプロパティ 'matched'を読み取れません"

ここに私のコードがあります：

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});
javascriptvue.jsvuejs2vue-router
16
Mohammad Reza

Vue must be 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)
})
50
Bert

私のVueファイルには、次のコードがありました。

次に、app.jsファイルを変更し、次のコードを配置します。

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

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

vue＆vue router＆match bug＆solution

マッチバグ

image

image

溶液

名前はrouterでなければなりません

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

image

OK

image

image

デフォルトモジュールのバグをインポート

importデフォルトモジュールは不要{}！

1
xgqfrms