vuejs3 routing issue, it is not display router-view or i make mistake somewhere?

Question

I'm currently working on a Vue.js project and facing challenges with navigation. Specifically, I'm facing difficulties navigating from the ProjectTypeSection to the InteriorDesignView and ExteriorDesignView pages. Maybe I use routes in wrong way maybe I use in wrong place

I've tried various solutions, but unfortunately, I couldn't identify the root cause. I've refrained from pasting the entire code here for clarity reasons, but I'll mention specific components that may be contributing to the problem: ProjectTypeSection, ProjectsView, InteriorDesignView, ExteriorDesignView, and the routes folder.

Here slices of my code

routes/pagesRoutes.js

    import ProjectsView from '@/views/ProjectsView.vue'
    import ServicesView from '@/views/ServicesView.vue'
    import AboutUsView from '@/views/AboutUsView.vue'
    import JoinUsView from '@/views/JoinUsView.vue'
    import ContactUsView from '@/views/ContactUsView.vue'
    import InteriorDesignView from '@/views/InteriorDesignView.vue'
    import ArchitectureView from '@/views/ExteriorDesignView.vue'
    
    export const pagesRoutes = [
      {
        path: '/projects',
        name: 'projects',
        component: ProjectsView,
        children: [
          {
            path: 'interior-design',
            name: 'interiorDesign',
            component: InteriorDesignView
          },
          {
            path: 'exterior-design',
            name: 'exteriorDesign',
            component: ArchitectureView
          }
        ]
      },
      {
        path: '/services',
        name: 'services',
        component: ServicesView
      },
      {
        path: '/about_us',
        name: 'aboutUs',
        component: AboutUsView
      },
      {
        path: '/join_us',
        name: 'joinUs',
        component: JoinUsView
      },
      {
        path: '/contact_us',
        name: 'contact',
        component: ContactUsView
      }
    ]

routes/index.js

        import { createRouter, createWebHistory } from 'vue-router'
        import { pagesRoutes } from '@/router/pagesRoutes.js'
        import HomeView from '@/views/HomeView.vue'
        import store from '@/store/store.js'
        
        let routes = [
          {
            path: '/',
            name: "home",
            component: HomeView
          },
          ...pagesRoutes
        ]
        
        
        const router = createRouter({
          history: createWebHistory(import.meta.env.BASE_URL),
          routes
        })
        
        router.beforeEach((to, from, next) => {
            store.commit("closeMobileMenu");
            next()
        })
        export default router

App.vue

<template>
  <AppHeader/>
  <div
    class="w-0 h-[54rem] bg-black opacity-70 absolute top-0 left-0 z-10 xl:hidden lg:hidden transition-all overflow-hidden"
    :class="{ 'w-1/2' : $store.state.isOpen }">
    <AppMobileMenu/>
  </div>
    <router-view/>
  <AppFooter/>
</template>

<script setup>
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'
import AppMobileMenu from '@/components/AppMobileMenu.vue'
</script>

ProjectTypeSection.vue from where the routing should navigate to ExteriorDesignView.vue and to InteriorDesignView.vue

<template>
  <section class="w-full flex flex-col justify-center items-center mt-[9rem]">
    <span class="text-5xl uppercase">Projects</span>
    <div class="w-full flex justify-center items-center mt-40">
      <div class="w-full flex max-lg:flex-col justify-around items-center gap-14">
        <router-link
          class="w-full flex max-sm:justify-center max-md:justify-center max-lg:justify-center"
          v-for="item of combineData"
          :key="item.id"
          :to="item.route"
        >
          <div
            class="group w-full max-sm:w-full max-md:w-5/6 max-lg:w-11/12 h-full flex flex-col justify-center items-start gap-8 relative">
            <img
              class="grayscale w-full h-full object-cover group-hover:grayscale-0 transition-all"
              :src="item.image"
              :alt="item.alt"
            >
            <div
              class="w-full h-14 absolute bottom-0 left-0 z-10 text-pink-600 text-4xl bg-black opacity-70 pl-5 group-hover:text-white transition-all max-max-md:text-3xl flex items-center">
              {{ item.title }}
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </section>
</template>

<script>
import { ref } from 'vue'
import img from '../assets/testImagesFolder/12.jpg'
import img1 from '../assets/testImagesFolder/22..jpg'
import { pagesRoutes } from '@/router/pagesRoutes.js'

export default {
  setup() {
    const projectTypes = ref([
      {
        id: 1,
        title: 'Interior Design',
        image: img,
        alt: 'Interior photo'
      },
      {
        id: 2,
        title: 'Exterior Design',
        image: img1,
        alt: 'Exterior photo'
      }
    ])

    const combineData = ref([])

    combineData.value = projectTypes.value.map((item, index) => {
      if (index === 0) {
        return {
          id: item.id,
          title: item.title,
          image: item.image,
          alt: item.alt,
          route: `${pagesRoutes[0].path}/${pagesRoutes[0].children[0].path}`
        }
      } else if (index === 1) {
        return {
          id: item.id,
          title: item.title,
          image: item.image,
          alt: item.alt,
          route: `${pagesRoutes[0].path}/${pagesRoutes[0].children[1].path}`
        }
      } else {
        return {
          id: item.id,
          title: item.title,
          image: item.image,
          alt: item.alt,
          route: pagesRoutes[index].path
        }
      }
    })

    return { combineData }
  }
}
</script>

Answer 1

The problem is in the way child routes are defined and used. As described in the documentation, the use of component in both parent and children routes presumes that router-view should exist in parent view (ProjectsView) in order for child views (InteriorDesignView, etc) to be rendered. This will result in ProjectsView and InteriorDesignView being rendered simultaneously in child route. If this is not the intention, route definition should be changed for ProjectsView and InteriorDesignView to be siblings:

  {
    path: '/projects',
    children: [
      {
        path: '',
        name: 'projects',
        component: ProjectsView,
      },
      {
        path: 'interior-design',
        name: 'interiorDesign',
        component: InteriorDesignView
      },
      {
        path: 'exterior-design',
        name: 'exteriorDesign',
        component: ArchitectureView
      }
    ]
  },