Ralat konfigurasi penghalaan, perlu menentukan laluan

Question

Saya mahu menambah laluan dinamik dan menggunakan komponen yang sama dalam semua laluan dinamik. Saya mencuba kod berikut untuk memaparkan komponen, tetapi saya mendapat ralat dengan mesej ralat berikut:

[vue-router] "laluan" diperlukan dalam konfigurasi penghalaan.

Apakah cara yang betul untuk menambah penghalaan dinamik dan memaparkan komponen yang sama?

const Foo = {
  templat: '<div>Foo</div>'
}
const Laman Utama = {
  templat: '<div>Home</div>'
}

penghala const = VueRouter baharu({
  mod: 'sejarah',
  laluan: [{
    laluan: '/',
    komponen: Rumah
  }]
})
aplikasi const = Vue baharu({
  penghala,
  el: "#vue-app",
  kaedah: {
    viewComponent: function(laluan, kaedah) {
      penyahpepijat;
      biarkan tf = `${path}/${method}`;

      biarkan newRoute = {
        laluan: tf,
        nama: `${path}_${method}`,
        komponen: {
          Foo
        },
      }
      this.$router.addRoute([newRoute])

    },

  }


});

<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>

  <router-view></router-view>
</div>

Answer 1

1. Masalah utama ialah anda menghantar tatasusunan kepada addRoutefungsi
2. Masalah kedua ialah permulaan laluan hilang / (tanpanya anda akan mendapat ralat "Laluan tidak bersarang mesti mengandungi aksara slash terkemuka")
3. Akhirnya gunakan $router.pushuntuk melompat ke laluan baharu

const Foo = {
  template: '<div>Foo</div>'
}
const Home = {
  template: '<div>Home</div>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
    path: '/',
    component: Home
  }]
})
const app = new Vue({
  router,
  el: "#vue-app",
  methods: {
    viewComponent: function(path, method) {
      let tf = `/${path}/${method}`;

      let newRoute = {
        path: tf,
        name: `${path}_${method}`,
        component: Foo,
      }
      this.$router.addRoute(newRoute)
      this.$router.push({ name: newRoute.name })
    },
  }
});

<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>

  <router-view></router-view>
</div>