Vue 3 路由工作错误

Question

我的项目中有一个菜单，它使用 v-for 循环呈现，并动态显示菜单项并路由到适当的视图页面。因此，当我单击菜单项时，它会路由到正确的路由，但此视图页面仅呈现在现有页面上。我该如何解决它？

在这里您可以看到我的

<HomeView/>

组件中的代码。

<template>
  <main class="text-white relative">
    <AppHeader/>
    <SliderAppSection/>
    <AppAboutUsHome/>
    <InteriorPhoto/>
    <ProjectTypeSection/>
    <AppTestimonials/>
    <AppFooter/>
  </main>
</template>

<MobileMenu/>

组件

<template>
  <router-link
    v-for="rout in pagesRoutes"
    :to="{name: rout.name}"
    :key="rout.name"
  >
    <button
      class="uppercase"
      :class="$store.commit('classes')"
    >
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      {{ rout.name }}
    </button>
  </router-link>
</template>

<script>
import { pagesRoutes } from '../router/pagesRoutes.js';

export default {
  data() {
    return {
      pagesRoutes: pagesRoutes,
    };
  },
};
</script>

这里是路线

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

       let homeRouter = [
  {
    path: '/',
    name: "home",
    component: HomeView
  }
]


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [homeRouter, ...pagesRoutes]
})

Answer 1

不要将

<router-view>

放在导航标题中，并将页眉和页脚放在

Home

vue 文件中，该结构应该包含如下所示的 App 文件：

<template>
  <main class="text-white relative">
    <AppHeader/>
    <router-view />
    <AppFooter/>
  </main>
</template>

<script setup>
import { useRouter } from 'vue-router';
import AppFooter from '@/components/AppFooter.vue'
import AppHeader from '@/components/AppHeader.vue'
</script>

这样，每当有人单击 AppHeader 中的链接更改 url 时，

<router-view>

就会更改为您在

router/index.js

文件中定义的组件

另外，你的router文件有一个错误，应该是这样的：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...homeRouter, ...mainRouter]
})

你是这样的：

routes: [homeRouter, ...mainRouter]

但是您已将

homeRouter

定义为数组，因此您必须以与

mainRouter

相同的方式使用

...

来扩展数组。