Vue项目中RouterView渲染异常，侧边栏跳转后消失问题求助

你的核心问题是路由嵌套配置错误，导致点击跳转时Home组件被卸载（侧边栏消失），而非在Home的RouterView中渲染子页面。以下是具体排查和修复步骤：

1. 修正路由嵌套配置 #

确保子页面路由是Home路由的children项，而非同级路由。错误配置会让跳转时直接替换Home组件，正确配置示例：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'
import UserManage from '../views/UserManage.vue'

Vue.use(VueRouter)

const routes = [
  // 默认重定向到Home的子页面，避免进入/home时RouterView为空
  { path: '/', redirect: '/home/dashboard' },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    // 子路由必须放在children数组中
    children: [
      {
        path: 'dashboard', // 注意：这里路径不需要加/，最终路径是/home/dashboard
        name: 'Dashboard',
        component: Dashboard
      },
      {
        path: 'user-manage',
        name: 'UserManage',
        component: UserManage
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2. 调整页面跳转逻辑 #

跳转时要匹配子路由的路径或名称，避免直接跳转到非嵌套路径。推荐用路由名称跳转（更可靠，不受路径变化影响）：

<!-- Home.vue -->
<template>
  <div class="home-container">
    <sidebar @menu-click="navigateToRoute"></sidebar>
    <!-- 这个RouterView会渲染Home的子路由组件 -->
    <router-view></router-view>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue'

export default {
  components: { Sidebar },
  methods: {
    navigateToRoute(routeName) {
      // 直接通过路由名称跳转，无需拼接路径
      this.$router.push({ name: routeName })
      // 如果用路径跳转，要确保包含父路由前缀：this.$router.push(`/home/${routePath}`)
    }
  }
}
</script>

3. 验证路由状态 #

打开Vue DevTools的Routes面板，点击菜单项后查看当前路由路径：

• 如果路径是/dashboard而非/home/dashboard，说明跳转路径错误
• 查看Components面板，若Home组件不在组件树中，说明路由匹配到了非嵌套路由，需修正配置

常见错误排查点 #

• 子路由路径前加了/：这会变成根路径，不再是Home的子路由
• 没有设置默认重定向：进入/home时RouterView无内容，容易误以为跳转无效
• 侧边栏组件的事件传递错误：确保点击事件正确触发Home中的跳转方法

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