Vue 路由器复制 App 组件的问题

Question

路由器

import { createRouter, createWebHistory } from 'vue-router'
import App from '../App.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'App',
      component: App,
      meta: {
        title: 'App'
      }
    }
  ]
})

export default router

应用程序.vue

<script setup>

import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <div>
    <RouterLink to="/">Home</RouterLink>
  </div> 
  <div>
      <RouterView />
  </div>  
</template>

所有其他路由也都有效，但路由“/”显示来自 App 的重复内容。如果我在路由文件中不包含组件：应用程序，则该应用程序可以正常工作，但它会向我发出警告，指出路径“/”的记录缺少“组件”。

Answer 1

您遇到的问题可能是由于您直接在 App.vue 组件的模板中使用

router-link

和

router-view

造成的。当您使用

App.vue

属性定义路线时，当路线与路径

"/"

匹配时，将渲染

component: App

组件。由于模板中存在

<router-view>

，因此将渲染重复的

App.vue

组件。

使用子路由分别定义布局和内容组件来解决这个问题。以下是如何更改代码的说明：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '../views/Layout.vue'
import Home from '../views/Home.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          name: 'Home',
          component: Home,
          meta: {
            title: 'Home'
          }
        }
      ]
    }
  ]
})

export default router

现在您可以为您需要的每个页面创建一个布局，以获得具有通用布局的通用视图

<template>
  <div>
    <RouterLink to="/">Home</RouterLink>
    <div>
      <RouterView />
    </div>
  </div>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

Home.vue

组件包含特定于 home 路由的内容。下面的代码是 home 组件的示例。

<!-- views/Home.vue -->

<template>
  <div>
    <!-- Home page content -->
  </div>
</template>

<script setup>
// Home page specific logic
</script>