切换为Vue Router后router-view重复渲染对应路由组件问题求助

当前组件重复渲染的核心原因是全局注册了所有路由对应的页面组件，且存在以下几处错误配置：

• 入口HTML（Laravel的blade模板）中同时存在页面组件的自定义标签和<router-view>，两者渲染结果重叠
• 可能在多个位置（包括子组件内）插入了<router-view>，导致同一路由被多次渲染
• 路由配置路径和router-link跳转路径不匹配，触发异常渲染逻辑

修复步骤 #

1. 调整入口HTML结构 #

打开承载Vue实例#app的Laravel blade模板，只保留全局通用布局组件和单个<router-view>，删除所有直接写入的页面组件自定义标签（如<nightingale-songs>、<nightingale-home>等），参考结构：

<div id="app">
  <side-bar></side-bar>
  <music-player></music-player>
  <!-- 全局仅保留这一个router-view，不要在SideBar等子组件内新增router-view -->
  <router-view></router-view>
</div>

2. 修正路由路径匹配问题 #

当前router.js中首页配置路径为/home，但SideBar内的跳转链接写为/nghome，路径不匹配会触发异常渲染，修改为一致即可：

// router.js中修改首页路径
{
  path: "/nghome",
  component: NightingaleHome,
  name: "home",
}

也可以将SideBar中对应router-link的to属性改为/home，两者保持一致即可。

3. 可选优化（避免后续冲突） #

路由对应的页面组件不需要全局注册，Vue Router会在路由匹配时自动加载渲染，可以删除app.js中冗余的页面组件全局注册代码，仅保留全局通用组件的注册逻辑：

// 删除以下冗余代码
Vue.component('music-upload', require('./components/MusicUpload.vue').default);
Vue.component('nightingale-songs', require('./components/NightingaleSongs.vue').default);
Vue.component('nightingale-album', require('./components/NightingaleAlbum.vue').default);
Vue.component('nightingale-artist', require('./components/NightingaleArtists.vue').default);
Vue.component('edit-songs', require('./components/EditSongs.vue').default);
Vue.component('nightingale-home', require('./components/NightingaleHome.vue').default);

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