Erreur de configuration de routage, besoin de spécifier le chemin

Question

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 :

[vue-router] "path" est requis dans la configuration du routage.

Quelle est la bonne manière d'ajouter un routage dynamique et d'afficher le même composant ?

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>

Answer 1

1. Le principal problème est que vous transmettez le tableau à la addRoutefonction
2. Le deuxième problème est qu'il manque le début du chemin / (sans cela, vous obtiendrez une erreur "Les routes non imbriquées doivent contenir un caractère barre oblique")
3. Enfin, utilisez $router.pushpour accéder au nouvel itinéraire

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>