ルーティング構成エラー。パスを指定する必要があります。

Question

動的ルートを追加し、すべての動的ルートで同じコンポーネントを使用したいと考えています。次のコードを実行してコンポーネントをレンダリングしようとしましたが、次のエラー メッセージが表示されてエラーが発生しました:

<ブロック引用>

[vue-router] ルーティング設定には「パス」が必要です。

動的ルーティングを追加して同じコンポーネントを表示する正しい方法は何ですか?

const Foo = {
  テンプレート: '<div>Foo</div>'
}
const ホーム = {
  テンプレート: '<div>ホーム</div>'
}

const router = new VueRouter({
  モード: '履歴'、
  ルート: [{
    パス： '/'、
    コンポーネント: ホーム
  }]
})
const app = 新しい Vue({
  ルーター、
  el: "#vue-app",
  メソッド: {
    viewComponent: 関数(パス, メソッド) {
      デバッガ;
      let tf = `${パス}/${メソッド}`;

      newRoute = { にします
        パス: tf、
        名前: `${パス}_${メソッド}`、
        コンポーネント: {
          フー
        }、
      }
      this.$router.addRoute([新しいルート])

    }、

  }


});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="vue-app">
  <a v-on:click="viewComponent('api/contact','get')">ddd</a>

  <ルータービュー></ルータービュー>
</div>

Answer 1

1. 主な問題は、配列を addRoute関数
に渡すことです。
2. 2 番目の問題は、パスの先頭に / がないことです (これがないと、「ネストされていないルートには先頭にスラッシュ文字が含まれている必要があります」というエラーが表示されます)
3. 最後に$router.pushを使用します新しいルートにジャンプします

リーリー リーリー