Necesito crear un componente en Vue JS dinámicamente al hacer clic y luego enrutar a ese componente. Estoy usando Vue 3. Todo debe suceder con un solo clic. Mi código se parece a esto
methods:{ routerClick(value){ console.log("number is "+value) this.$router.push({path:'New', name:'New', component: ()=>Vue.component('New')}) } },No necesito mover un componente que ya está creado. Quiero crear un componente dentro de este método y luego enrutar al componente usando este enrutador. Por favor, cualquier sugerencia será muy apreciada.
A continuación se muestra una solución simplista que funciona (no soy un experto en Vue 3).
El punto principal es usar addRoute antes de enviarlo, porque no puede especificar el componente de ruta al enviar a una ruta.
Aquí está el codesandbox con la solución de trabajo.
<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>