Vue 2登录后路由跳转URL变更但Home组件不渲染问题求助

核心问题：缺少<router-view>标签 #

Vue Router 渲染匹配的路由组件依赖根组件（App.vue）中的 <router-view> 标签，它是路由组件的专属挂载容器。你提供的代码里未包含App.vue内容，大概率是遗漏了这个标签，导致路由跳转后Home组件没有渲染位置，页面停留在登录页。

解决步骤 #

1. 修改 App.vue，添加路由挂载容器：

<template>
  <div id="app">
    <!-- 匹配到的路由组件会在此处渲染 -->
    <router-view></router-view>
  </div>
</template>

2. 优化路由配置（可选）：
   如果登录页也需要通过路由访问，建议补充登录组件的路由规则：

// main.js 路由配置部分
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: () => import('./components/Login.vue') // 登录组件路由
    },
    {
      path: '/home',
      component: Home
    }
  ]
});

这样初始访问根路径会加载登录组件，登录成功跳转后，<router-view>会自动替换为Home组件。

3. 检查登录组件挂载方式：
   如果登录组件是直接写死在App.vue模板中（未通过路由控制），即使路由跳转，登录组件仍会显示。这种情况需要将登录组件改为路由组件，或通过登录状态用v-if控制其显示隐藏。

额外验证项 #

• 打开浏览器控制台，查看是否有路由相关报错；
• 确认Home组件本身无语法错误，可单独正常渲染；
• 在this.$router.push('/home')行添加console.log('跳转触发')，验证代码是否执行到该逻辑。

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