<p>Ich möchte dynamische Routen hinzufügen und in allen dynamischen Routen dieselbe Komponente verwenden. Ich habe versucht, die Komponente mit dem folgenden Code zu rendern, habe jedoch eine Fehlermeldung mit der folgenden Fehlermeldung erhalten: </p> <blockquote> <p>[vue-router] „Pfad“ ist in der Routing-Konfiguration erforderlich. </p> </blockquote> <p>Wie fügt man dynamisches Routing richtig hinzu und zeigt dieselbe Komponente an? </p> <p> <pre class="brush:js;toolbar:false;">const Foo = { Vorlage: '<div>Foo</div>' } const Home = { Vorlage: '<div>Home</div>' } const router = new VueRouter({ Modus: 'Geschichte', Routen: [{ Weg: '/', Komponente:Zuhause }] }) const app = new Vue({ Router, el: „#vue-app“, Methoden: { viewComponent: function(path, method) { Debugger; let tf = `${path}/${method}`; let newRoute = { Pfad: tf, Name: `${path}_${method}`, Komponenten: { Foo }, } this.$router.addRoute([newRoute]) }, } });</pre> <pre class="brush:html;toolbar:false;"><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></pre> </p>

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>