Vue3 + Vue-Router首屏组件重复渲染问题求助

问题根源 #

你犯了典型错误：App.vue既作为根实例挂载到#app，又被配置成根路由的组件。这导致页面出现两层App组件：一层是挂载在#app的根App，它的<router-view>又渲染了路由配置里的App组件，所以导航栏重复显示。

修复步骤 #

1. 新建独立首页组件 #

创建Home.vue作为根路径的专属内容组件：

<template>
  <div class="home-container">
    <!-- 这里编写首页具体内容，比如欢迎语、首页展示模块 -->
    <h1>欢迎访问 COVELESS</h1>
  </div>
</template>

<script setup>
// 首页业务逻辑写在此处
</script>

2. 修改路由配置（router.js） #

移除对App.vue的导入，将根路径组件替换为新建的Home.vue：

import { createRouter, createWebHistory } from 'vue-router'
import LoginMenu from './components/LoginMenu.vue'
import AllElement from './components/AllElement.vue'
import Dashboard from './components/Dashboard.vue'
// 导入新建首页组件，删除App.vue的导入
import Home from './components/Home.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home // 替换为Home组件
    },
    {
        path: '/login',
        name: 'Login',
        component: LoginMenu
    },
    {
        path: '/canvas',
        name: 'Canvas',
        component: AllElement
    },
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard
    }
]

const history = createWebHistory();

const router = createRouter({
    history,
    routes,
});

export default router

3. 优化App.vue模板（可选） #

Vue3模板中无需使用this，直接调用变量即可，把this.userLogged改为userLogged：

<template>
<div class="container-fluid">
    <nav class="navbar navbar-expand-md  fixed-top">
        <div class="menu-izq">
            <router-link id="logo" class="menu-item" to="/">COVELESS</router-link>
            <router-link class="menu-item" v-if="!userLogged" to="/login">Login</router-link>
            <router-link class="menu-item" v-if="userLogged" to="/canvas">Canvas</router-link>
            <router-link class="menu-item" v-if="userLogged" to="/dashboard">Dashboard</router-link>
        </div>
        <div class="menu-dcha">
            <router-link class="menu-item" v-if="userLogged" v-on:click="vaciarStorage()" to="/login">Logout
            </router-link>
        </div>
    </nav>

    <router-view></router-view>
</div>
</template>

原理说明 #

App.vue是全局根组件，负责承载导航栏、全局样式等公共内容，<router-view>是路由页面的占位符，所有路由组件都会渲染到这个占位符内。之前把App.vue放进路由配置，等于在占位符里嵌套了完整的App组件，自然会出现重复的导航栏。

内容的提问来源于stack exchange，提问作者Alvaro Navarrete