在 Vue JS 中动态创建一个组件

Question

我需要在单击时动态地在 Vue JS 中创建一个组件，然后路由到该组件。我正在使用 Vue 3。一切都需要一键完成。我的代码看起来像这样

methods:{
  routerClick(value){
    console.log("number is "+value)
    this.$router.push({path:'New', name:'New', component: ()=>Vue.component('New')})
  }
},

我不需要移动已经创建的组件。我想在此方法中创建一个组件，然后使用此路由器路由到该组件。如有任何建议，我们将不胜感激。

Answer 1

下面是一个简单的可行解决方案（我不是 Vue 3 专家）。

重点是在推送之前使用addRoute，因为推送到路由时不能指定路由组件。

这是 codesandbox 的工作解决方案。

 <template>
  <router-link to="/">Home</router-link>
  <button @click="createComponent">Create Component</button>

  <router-view></router-view>
</template>

<script>
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "App",
  setup() {
    const app = getCurrentInstance().appContext.app;
    const router = useRouter();

    const createComponent = () => {
      // Check if the component has been alreadey registered
      if (!app.component("NewComponent")) {
        app.component("NewComponent", {
          name: "NewComponent",
          template: `<div>This is a new component</div>`
        });
      }

      const newComponent = app.component("NewComponent");
      // Adding a new route to the new component
      router.addRoute({ path: "/new", component: newComponent });

      router.push("/new");
    };
    return {
      createComponent,
    };
  },
};
</script>

在 Vue JS 中动态创建一个组件

Dynamically create a component in Vue JS

javascript

vue.js

vue-component

vuex

vuejs-slots