Vue路由路径匹配成功但router-view渲染错误组件如何排查

排查方向 #

• 检查父组件Home的模板代码，必须包含<router-view>标签。你当前配置的login、forgot-password都是/路径的子路由，子路由的内容必须通过父级路由对应组件的router-view插槽渲染，缺少该标签会导致子路由内容无法正常展示，或者出现渲染异常。
• 检查组件导入语句是否正确。确认路由配置顶部的Login、ForgotPassword组件导入路径有没有写错，是否误导入了其他组件，这是高频出错场景。
• 检查是否存在优先级更高的冲突路由。如果你的完整路由配置里，在当前给出的规则之前，存在动态路由（比如path: ':username'）、通配符路由或者重定向规则匹配到了/login、/forgot-password路径，会优先触发前面的规则导致渲染错误。可以在页面中执行以下代码打印路由匹配结果验证：

  console.log(this.$router.resolve('/login'))
  

  查看输出结果的matched数组，确认匹配到的路由项是否是你预期的配置。
• 检查router-view是否设置了name属性。如果你的模板里给router-view加了自定义name，路由配置里需要对应使用components字段绑定命名视图，否则只会渲染默认视图内容。

如需进一步定位，请补充以下信息： #

• 你当前访问的完整路径，预期渲染的组件、实际渲染的组件分别是什么
• 完整的路由配置代码，包含所有路由项和顶部的组件导入语句
• Home组件的完整模板代码
• 你使用的Vue、Vue Router版本号

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