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 de URL tienen un valor de "#". los dos restantes tienen caminos 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> </div>El problema ahora es que cuando la página web se carga inicialmente, funciona bien, pero después de hacer clic en el enlace de cartera o servicios, las rutas a los demás cambian.
por ejemplo, si estaba en la página del portafolio e intentaba volver a la página de inicio, cambiaría la ruta de la ruta a "portfolio#" y se negaría a cambiar de página.
¿Alguien puede ayudar a explicar por qué es esto y una posible forma de resolverlo?
También estaba enfrentando el problema similar.
Para mí, el problema era que estaba redirigiendo a una nueva página usando router.push() al hacer clic en un div.
Y estaba usando @click.stop = "myFunction" . Esto fue agregar un # en la URL y no redirigir al usuario.
Probé diferentes variaciones de esto también. Intenté usar el objeto de event también como event.stopPropagation() . Con esto también obtuve el mismo resultado.
Cuando usé @click.prevent , todo funcionó como se esperaba.
PD:
También puede usar el bloque catch para rastrear el error.
this.$router..push({ name: "PAthName", params: { id }, query: { id } }) .catch(e => { console.log("Errors", e); });Debería haber actualizado esto antes.
La solución fue relativamente simple, todo lo que hice fue cambiar el enlace de
<router-link class="w-full" :to="men.url"> {{men.name}} </router-link>a
<router-link class="w-full" :to="`/${men.url}`"> {{men.name}} </router-link>¡y voilá!