Vue路由跳转URL更新但页面始终与根页面一致该如何解决

问题根因 #

路由配置中的组件属性名拼写错误，导致VueRouter无法匹配到对应要渲染的组件。

修复方案 #

打开你的router/index.js文件，找到路由规则配置段：

const routes = [
  { path: '/login' , compoment: login}
]

将拼写错误的compoment修改为正确的属性名component即可：

const routes = [
  { path: '/login' , component: login}
]

修改后重启项目即可正常渲染login页面。

补充排查方向（若修改后仍有问题可核对） #

• 确认VueRouter版本和Vue2适配：Vue2对应vue-router@3版本，不要安装适配Vue3的vue-router@4版本
• 确认项目中没有重复定义路由规则，也没有根路由重定向逻辑覆盖/login规则

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