VueJS点击按钮跳转子路由URL更新但子组件未渲染问题求解

必改项：父组件添加路由渲染出口 #

你这个问题90%的原因是父路由对应的AppPortfolio组件模板中，没有添加<router-view>标签作为子路由的渲染占位。子路由匹配到的PortfolioSummary组件，必须渲染在父组件的<router-view>位置才能正常显示，直接在AppPortfolio的模板合适位置添加下面的代码即可：

<!-- AppPortfolio 组件模板中添加 -->
<router-view></router-view>

其他可选排查修改点 #

如果加了<router-view>之后还是无法正常加载，可以按下面的顺序排查：

• 确认参数有效性：在navigateToSummary方法中打印this.coinSummary.coinId，确认参数不是空值或者undefined，参数异常会导致路由匹配失败
• 检查路由优先级：确认路由配置列表中，没有优先级更高的路由规则先匹配到/portfolio/xxx的路径，比如提前配置了path: '/portfolio/other'的路由，会优先于动态参数路由触发
• 排查组件报错：打开浏览器开发者工具的控制台，查看是否有PortfolioSummary组件初始化、渲染阶段的JS报错，组件内部报错也会导致渲染失败
• 确认路由注册正确：检查根路由配置中已经正确注册了AppPortfolio对应的路由规则，没有遗漏父级路由的入口配置

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