vuejs3 路由问题，它没有显示 router-view 还是我在某个地方出错了？

Question

我目前正在开发一个 Vue.js 项目，并面临导航方面的挑战。具体来说，我在从 ProjectTypeSection 导航到 InteriorDesignView 和 ExteriorDesignView 页面时遇到困难。也许我以错误的方式使用路线也许我在错误的地方使用

我尝试了各种解决方案，但不幸的是，我无法找出根本原因。为了清楚起见，我没有在此处粘贴整个代码，但我会提到可能导致该问题的特定组件：ProjectTypeSection、ProjectsView、InteriorDesignView、ExteriorDesignView 和路由文件夹。

这是我的代码片段

路线/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
      }
    ]

路线/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

应用程序.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，路由应从其中导航到 ExteriorDesignView.vue 和 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

问题在于子路由的定义和使用方式。如 documentation 中所述，在父级和子级路由中使用

component

假定

router-view

应存在于父视图 (ProjectsView) 中，以便渲染子视图（InteriorDesignView 等）。这将导致 ProjectsView 和 InteriorDesignView 在子路由中同时渲染。如果这不是本意，则应更改路由定义以使 ProjectsView 和 InteriorDesignView 成为同级：

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