从 router-link 转到特定组件视图

Question

有没有办法从具有多个组件的路由到达特定组件？，我搜索了docs，但没有任何相关信息

这里有我在应用程序路由器中的缩短路线：

const routes: RouteRecordRaw[] = [
    {
        path: "/",
        name: "home",
        component: HomeView,
    }
    {
        path: "/configuracion",
        name: "configuracion",
        components: {
            default: DatosClienteView,
            DatosClienteView,
            GestionUsuarios,
            Notificaciones,
            SelectorClientes,
        },
        meta: {
            sons: [
                {
                    name: "Cliente",
                    componente: "DatosClienteView",
                    icono: "mdi-account",
                    activo: "success",
                },
                {
                    name: "Gestiones",
                    componente: "GestionUsuarios",
                    icono: "mdi-menu",
                    activo: "",
                },
                {
                    name: "Notificaciones",
                    componente: "Notificaciones",
                    icono: "mdi-bell",
                    activo: "",
                },
                {
                    name: "Selector cliente",
                    componente: "SelectorClientes",
                    icono: "mdi-account-group",
                    activo: "",
                },
            ],
        },
    },
];

我需要从应用程序的另一个路由显示 /configuration 路由的特定组件。像这样的东西：

<routerLink :to="{name: 'configuracion', component: 'Notificaciones'}"><p> link</p>

Answer 1

我认为可以通过在特殊元素中使用 vue build 以其他方式实现

<template>
  <component :is="actualComponentToRender">
 </template>
 
 <script setup>
import {DatosClienteView,GestionUsuarios,Notificaciones, SelectorClientes } from 'client'
 
 onMounted(() => {
   actualComponentToRender = router.param.type == 'condition' ? DatosClienteView
 })
}
</script>
 </script>

请参阅此链接了解更多信息

Answer 2

使用Options API，您可以像这样导航到任何目的地

this.$route.push({name: 'configuracion'})

使用 Composition API (Vuejs 3)，我们无法访问 setup 内部的

this

，而是使用

useRouter

和用户

userRoute

函数

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function yourMethod(query) {
      router.push({
        name: 'configuracion',
      })    
    }

    return {
      yourMethod,
    };
  },
}
</script>