Vue应用路由更新但router-view不渲染问题求助

你的问题核心在于嵌套路由的渲染逻辑缺失：你将UserProfile配置为MainUserView的子路由，但根组件App.vue中的<router-view>仅负责渲染一级路由组件，子路由的内容必须在父路由组件（即MainUserView）内部添加<router-view>才能显示。

具体修复步骤 #

1. 给MainUserView添加子路由渲染容器 #

打开MainUserView.vue，在模板的合适位置新增<router-view>，用来承载UserProfile这类子路由组件：

<template>
  <!-- MainUserView原有的页面内容 -->
  <div class="main-user-wrapper">
    <!-- 这里保留你原本的MainUserView内容 -->
    <router-view></router-view> <!-- 新增：子路由的渲染容器 -->
  </div>
</template>

2. 修正App.vue的视图控制逻辑 #

你在App.vue中直接通过v-if渲染MainView，这会和路由的自动渲染逻辑冲突。路由已经配置了/路径对应MainView，所以应该移除App.vue中手动渲染的MainView，完全交给路由系统控制视图：
修改App.vue的模板部分：

<template>
  <div id="wrapper">
    <navbar v-if="user"></navbar>
    <section class="section">
      <router-view/> <!-- 所有路由组件（包括MainView、MainUserView）都通过这里渲染 -->
    </section>
  </div>
</template>

3. 补全缺失的路由配置 #

你的导航栏中有/send-message的链接，但当前路由配置里没有这个路径对应的规则，需要补充路由配置，或者调整链接地址避免404错误。

为什么之前的尝试无效？ #

• 移动导航栏位置没用：问题根源是子路由没有对应的渲染容器，和导航栏所在位置无关；
• 仅保留App.vue的router-view没用：子路由的内容不会自动渲染到根视图中，必须在父路由组件内声明子视图容器。

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