<p>Je souhaite ajouter des itinéraires dynamiques et utiliser le même composant dans tous les itinéraires dynamiques. J'ai essayé le code suivant pour restituer le composant, mais j'ai obtenu une erreur avec le message d'erreur suivant : </p> <blockquote> <p>[vue-router] "path" est requis dans la configuration du routage. </p> </blockquote> <p>Quelle est la bonne manière d'ajouter un routage dynamique et d'afficher le même composant ? </p> <p> <pre class="brush:js;toolbar:false;">const Foo = { modèle : '<div>Foo</div>' } const Accueil = { modèle : '<div>Accueil</div>' } const routeur = nouveau VueRouter ({ mode : 'historique', itinéraires : [{ chemin: '/', composant : Accueil }] }) const app = nouvelle Vue({ routeur, el: "#vue-app", méthodes : { viewComponent : fonction (chemin, méthode) { débogueur ; laissez tf = `${chemin}/${méthode}` ; laissez newRoute = { chemin : tf, nom : `${chemin}_${méthode}`, Composants: { Fou }, } this.$router.addRoute([newRoute]) }, } });</pré> <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> <vue-routeur></vue-routeur> </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>