在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之前使用它，因为你不能在推送到路由时指定路由组件。

这是包含工作解决方案的代码盒。

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