After setting up my router file using Vue 3, it looks like this:
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;
In addition, I am fetching paths from an API "https://api.fake.rest/ca2a6662-22d0-4010-ba08-0440ffe813ab/menu" using a v-for loop. Out of the 5 URL paths retrieved, 3 have a value of "#" and the remaining 2 have normal paths.
<div
v-for="(men, index) in webMenu.menu_items"
:key="index" class=" mt-32"
>
<router-link class="w-full" :to="men.url"> {{men.name}} </router-link>
</div>
<p class="font-bold">{{webMenu.menu_text}}</p>
</div>
However, I am encountering an issue where upon initial webpage load everything works as expected, but after clicking on the portfolio or services link, the paths to other pages get modified.
For instance, if I navigate to the portfolio page and then attempt to go back to the home page, the route path changes to "portfolio#" causing difficulty in switching pages.
I am seeking help in understanding why this happens and any possible solutions to resolve it. Any insights are greatly appreciated.