I recently started working on a vue-project where I created a Home page with a sideBar component and a routerView component.
Here's a preview:
https://i.sstatic.net/f51tdsZ6.png
When clicking on any sidebar item, the router navigates to the corresponding path defined in the navigateToRoute() function in Home.vue. However, the components fail to render through the router-view, causing the sidebar to disappear upon redirection. This issue persists for other menu items as well.
https://i.sstatic.net/rUWWbHMk.png
Below is the code snippet from Home.vue and router/index.js (where routes are defined).
Home.vue
<template>
<div class="landing-page">
<categoryPage v-if="menuItemRendered === 'category'" />
<sidebar @menuItemSelected="navigateToRoute"/>
<RouterView />
</div>
</template>
... (remaining code is unchanged)
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// Other imports...
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
I suspect there might be an issue with how the route was defined, but I'm not entirely certain. I've already attempted some solutions, as noted below:
- not working even though its connected
- router-view content not rendering
Edit 1: Vue devtool image added
Upon visiting the homepage, this is what I observed in the Vue DevTools: