I have a primary layout component (consists of a fixed top header and a left side menu with multiple links created using the router-link component) as well as a "dynamic" layout component that serves as the heart of the page.
My goal is to change the central content of my website by routing to different components based on the link clicked in the left menu.
To achieve this, I've placed the router-view in my App.vue file, which is the highest-level Vue component in my application, as shown in the following code:
<template>
<div id="app">
<layout>
<router-view/>
</layout>
</div>
</template>
This is my primary layout component containing the header and the left menu, which are the fixed parts of my website:
<template>
<v-app>
<loader></loader>
<v-layout row wrap>
<v-flex xs12>
<stickyHeader></stickyHeader>
</v-flex>
<v-flex xs2>
<sideNavMenu></sideNavMenu>
</v-flex>
</v-layout>
</v-app>
</template>
Within my sideNavMenu component, there are multiple router-link components like this:
<router-link to="/home">Home</router-link>
These links are then handled in my router configuration to map specific URLs to Vue components:
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: home
}
]
})
However, despite setting up everything correctly, it seems like the routing is not working properly, leaving me puzzled. Any assistance would be greatly appreciated :)