Vue.js路由变更但对应组件未渲染且控制台无报错问题求助

问题描述 #

vue-router实例基础功能运行正常：点击router-link按钮后url会跳转至对应地址，且router.js文件中已确认配置路由与组件的对应关系。但路由成功变更后对应组件没有渲染，同时控制台也没有输出任何报错信息。

相关参考截图：

• Component 1
  
• Router.js
  
• router-view
  

排查修复方案 #

• 检查<router-view>占位符状态：确认对应父组件中的<router-view>没有被v-if/v-show隐藏，也没有放在仅单次执行的渲染分支中；如果搭配keep-alive使用，核对include/exclude规则是否排除了目标组件。
• 核对路由配置字段拼写：router.js中每个路由项的组件字段必须为单数component，如果误写为复数components会出现无报错不渲染的问题。
• 确认嵌套路由的router-view层级：如果配置了嵌套子路由，子路由对应的<router-view>必须放在父路由对应的组件内部，不能直接放在根App.vue中。
• 校验组件导入路径：如果使用动态导入语法() => import('./xxx.vue')，核对路径的拼写、大小写是否和实际文件路径完全匹配，部分环境下路径错误不会抛出控制台报错。
• 测试路由模式兼容性：如果使用history路由模式，可先切换为hash模式测试渲染是否正常，若hash模式正常则需要补充配置服务端的history模式重定向规则。
• 确认路由实例挂载：核对main.js中是否正确将router实例挂载到Vue根实例上，示例写法为new Vue({ router, render: h => h(App) }).$mount('#app')，漏传router参数会导致无报错不渲染。

内容的提问来源于stack exchange，提问作者Carlos Augusto Spínola