Routing-Konfigurationsfehler. Der Pfad muss angegeben werden

Question

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:

[vue-router] „Pfad“ ist in der Routing-Konfiguration erforderlich.

Wie fügt man dynamisches Routing richtig hinzu und zeigt dieselbe Komponente an?

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

    },

  }


});

<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. 主要问题是你将数组传递给了addRoute函数
2. 第二个问题是路径开头缺少了/（没有它，你将会得到一个“非嵌套路由必须包含一个前导斜杠字符”的错误）
3. 最后使用$router.push跳转到新的路由

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>