RouterView is not working in the vue project

Question

I am working on a vue-project. I am having a Home page on which I had a sideBar component and a routerView component.

It looks like this

On clicking any item of the sidebar, the router pushes to a respective path of that page defined in navigateToRoute() fn in Home.vue. But the components are not rendered through the router-view due to which when redirection happens , the sidebar on the left disappears . Similar thing happens for other menuItems

Below is the code for 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>

<script>
 /* eslint-disable */

/* File imports */

import sidebar from "@/components/sidebar.vue";
import categoryPage from "@/pages/category-page.vue";


/* Util imports */
import { getCompany } from "@/helper/utils";


import { RouterView } from "vue-router";

export default {
  name: "LandingPage",
  components: {
    
    sidebar,
    
  },
  data() {
    return {
      applications_list: [],
      all_applications: [],
      pageLoading: false,
      menuItemRendered: 'category',
    };
  },
  mounted() {
    this.fetchApplications();
    //console.log(MainService.getDepartments());
  },
  methods: {
    
    handleMenuItemSelected(menuItem) {
      console.log("Selected Menu Item: ", menuItem);
      this.menuItemRendered = menuItem;
    },
    navigateToRoute(menuItem) {
      console.log("Selected Menu Item: ", menuItem);
      switch(menuItem) {
        case 'category':
          this.$router.push(`${getCompany()}/category`);
          break;
        case 'subCategory':
          this.$router.push(`${getCompany()}/subCategory`);
          break;
        case 'product':
          this.$router.push(`${getCompany()}/product`);
          break;
        case 'vendor':
          this.$router.push(`${getCompany()}/vendor`);
          break;
        case 'vendorHoliday':
          this.$router.push(`${getCompany()}/vendorHoliday`);
          break;
        case 'brand':
          this.$router.push(`${getCompany()}/brand`);
          break;
        case 'tags':
          this.$router.push(`${getCompany()}/tags`);
          break;
        case 'productTagMapping':
          this.$router.push(`${getCompany()}/productTagMapping`);
          break;
        case 'fvStickers':
          this.$router.push(`${getCompany()}/fvStickers`);
          break;
        case 'productStickers':
          this.$router.push(`${getCompany()}/productStickers`);
          break;
        default:
          this.$router.push(`${getCompany()}/`)
      }
    }
  },
};
</script>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue';

import CategoryPage  from '../pages/category-page.vue';
import subCategory from "@/pages/subCategory.vue";
import product from "@/pages/product.vue";
import vendor from "@/pages/vendor.vue";
import vendorHoliday from "@/pages/vendorHoliday.vue";
import brand from "@/pages/brand.vue";
import tags from "@/pages/tags.vue";
import productTagMapping from "@/pages/productTagMapping.vue";
import fvStickers from "@/pages/fvStickers.vue";
import productStickers from "@/pages/productStickers.vue";


import { routeGuard } from './guard';
Vue.use(VueRouter)

const routes = [
  {
    path: '/company/:company_id/',
    name: 'Home',
    beforeEnter: routeGuard,
    component: Home
  },

  //sideBar Page routes,
  {
    path: '/company/:company_id/category',
    name: 'category-page',
    component: CategoryPage,
  },
  {
    path: '/company/:company_id/subCategory',
    name: 'subCategory',
    component: subCategory,
  },
  {
    path: '/company/:company_id/product',
    name: 'product-page',
    component: product,
  },
  {
    path: '/company/:company_id/vendor',
    name: 'vendor-page',
    component: vendor,
  },
  {
    path: '/company/:company_id/vendorHoliday',
    name: 'vendor-holiday-page',
    component: vendorHoliday,
  },
  {
    path: '/company/:company_id/brand',
    name: 'brand-page',
    component: brand,
  },
  {
    path: '/company/:company_id/tags',
    name: 'tags-page',
    component: tags,
  },
  {
    path: '/company/:company_id/productTagMapping',
    name: 'product-tag-mapping-page',
    component: productTagMapping,
  },
  {
    path: '/company/:company_id/fvStickers',
    name: 'fvStickers',
    component: fvStickers,
  },
  {
    path: '/company/:company_id/productStickers',
    name: 'product-stickers',
    component: productStickers,
  },



]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

I might think there's some issue with how I defined the route but not sure about that.

I have tried these already but not working

• not working even though its connected
• router-view content not rendering

Edit 1: Vue devtool image added

While going to the homepage, I got this in vue dev tools

Answer 1

You have a router-view component in App.vue which is the root router-view for all your routes. This means your routes, /company/:company_id/, /company/:company_id/subCategory, etc. all load into this router-view unless you specify otherwise.

For nested routes (router-view inside another router-view) you need to use the children route property:

const routes = [
  {
    path: '/company/:company_id/',
    name: 'Home',
    beforeEnter: routeGuard,
    component: Home,
    //sideBar Page routes
    children: [
      {
        path: 'category',
        name: 'category-page',
        component: CategoryPage,
      },
      {
        path: 'subCategory',
        name: 'subCategory',
        component: subCategory,
      },
      ...
    ]
  },