es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue-router sigue agregando # a las rutas existentes. P.D. esto no es el típico problema de hash o modo historial.

Usando Vue 3, tengo mi archivo de enrutador configurado de esta manera

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/Portfolio",
        name: "Portfolio",
        component: () =>
            import(/*webpackChunkName: "DestinationDetails" */ "../views/Portfolio"),
    },
    {
        path: "/Services",
        name: "Services",
        component: () =>
            import(/*webpackChunkName: "DestinationDetails" */ "../views/Services"),
    },

    {
        path: "/details/:id",
        name: "PortfolioDetails",
        component: () =>
            import(
                /*webpackChunkName: "DestinationDetails" */ "../views/PortfolioDetails"
            ),
    },
    {
        path: "/:pathMatch(.*)*",
        redirect: "/Home",
    },
];

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
});

export default router;

También estoy ejecutando un bucle v-for para obtener rutas de una API “https://api.fake.rest/ca2a6662-22d0-4010-ba08-0440ffe813ab/menu”. 3 de las 5 rutas URL tienen un valor de “#”. Las otras dos tienen rutas normales.

<div v-for="(men, index) in webMenu.menu_items" :key="index" class=" mt-32">
    <!-- <SidebarLink class="w-full" :to="{path:men.url}" icon="fas fa-home">{{ men.name }}</SidebarLink> -->

    <router-link class="w-full" :to="men.url"> {{ men.name }} </router-link>
</div>

<p class="font-bold">{{ webMenu.menu_text }}</p>

El problema es que cuando se carga inicialmente la página web, funciona bien, pero después de hacer clic en el enlace de cartera o servicios, las rutas a las otras páginas se modifican.

Por ejemplo, si estaba en la página de la cartera e intenté volver a la página de inicio, cambiaría la ruta a “portfolio#” y se negaría a cambiar de página.

¿Alguien puede explicar por qué sucede esto y una posible forma de resolverlo?

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    El problema parece ser causado por incluir un caracter de número (#) en algunas de las rutas de URL. Esto puede hacer que la página se desplace hacia un elemento específico en la página en lugar de cargar una nueva página.

    Para resolver esto, puedes eliminar el caracter de número de las rutas de URL en la API o actualizar los enlaces del enrutador para incluir el caracter de número solo para los elementos específicos que lo necesiten.

    Por ejemplo, si tienes una sección específica en la página de inicio que debe ser vinculada con un caracter de número, puedes utilizar la siguiente sintaxis para el enlace del enrutador:

    <router-link to="/home#section1">Inicio</router-link>
    

    Esto navegará a la página de inicio y se desplazará hacia el elemento con el ID “section1”.

    Si eliminas el caracter de número de las rutas de URL en la API, deberás asegurarte de que los enlaces del enrutador se actualicen en consecuencia.

    En general, la clave está en utilizar rutas de URL consistentes sin incluir ningún caracter que pueda interferir con el proceso de enrutamiento.

Comments are closed.