Vue Router无法渲染第三个组件，前两个组件正常工作

嘿，这问题其实一眼就能看出来——你在路由配置里犯了个拼写小错误！

看你的index.js里的Register路由项：

{
  path: '/account/register',
  name: 'Register',
  compontent: Register // 这里拼写错啦！
}

注意第三个属性，你写成了compontent，正确的拼写应该是component（少了一个字母e）！

正因为这个拼写错误，Vue Router无法识别这个属性，自然找不到对应的Register组件来渲染。而你把Register组件放到Login路由里能正常工作，是因为Login路由里的component拼写是完全正确的。

修复步骤 #

1. 打开你的router/index.js文件
2. 定位到Register的路由配置项，把compontent修改为正确的component
3. 保存文件后，因为你用npm run dev启动的是热重载服务，页面会自动刷新，这时候Register组件就能正常显示了

下次写代码的时候多留意一下属性名的拼写哦，这种小失误很常见，但排查起来也很简单~

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