<p>我想要添加动态路由并在所有动态路由中使用相同的组件。我尝试了以下代码来渲染组件，但是我得到了一个错误，错误信息如下：</p> <blockquote> <p>[vue-router] “path”在路由配置中是必需的。</p> </blockquote> <p>添加动态路由并显示相同组件的正确方法是什么？</p> <p> <pre class="brush:js;toolbar:false;">const Foo = { template: '&lt;div&gt;Foo&lt;/div&gt;' } const Home = { template: '&lt;div&gt;Home&lt;/div&gt;' } const router = new VueRouter({ mode: 'history', routes: [{ path: '/', component: Home }] }) const app = new Vue({ router, el: "#vue-app", methods: { viewComponent: function(path, method) { debugger; let tf = `${path}/${method}`; let newRoute = { path: tf, name: `${path}_${method}`, components: { Foo }, } this.$router.addRoute([newRoute]) }, } });</pre> <pre class="brush:html;toolbar:false;">&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"&gt;&lt;/script&gt; &lt;script src="https://npmcdn.com/vue-router/dist/vue-router.js"&gt;&lt;/script&gt; &lt;div id="vue-app"&gt; &lt;a v-on:click="viewComponent('api/contact','get')"&gt;ddd&lt;/a&gt; &lt;router-view&gt;&lt;/router-view&gt; &lt;/div&gt;</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>