Vue带参数路由无法识别匹配组件，访问自动重定向到Home页排查求助

1. 启用Vue Devtools路由面板 #

打开浏览器的Vue Devtools，切换到「路由」标签页，可以直观看到所有已注册的路由规则、当前页面匹配到的路由、完整的跳转历史，以及当前路由的params、query等所有属性。直接查看访问/product/1时匹配到的路由是否为你定义的ProductDetails路由即可快速定位匹配异常问题。

2. 添加全局路由守卫打印日志 #

在router.js中实例化路由后、导出路由前，添加如下全局前置守卫代码：

router.beforeEach((to, from, next) => {
  // 打印所有路由跳转信息
  console.log('目标路由信息：', to)
  console.log('来源路由信息：', from)
  console.log('匹配到的路由规则栈：', to.matched)
  // 需要查看参数直接打印 to.params 即可
  console.log('路由参数：', to.params)
  next()
})

如果to.matched为空，说明没有任何路由匹配到当前访问路径，可优先排查路由规则冲突问题。

3. 断点设置方法 #

• 在上述路由守卫代码中添加debugger语句，页面跳转时会自动进入断点，可逐行查看路由跳转的全流程变量
• 打开浏览器Sources面板，找到你的router.js文件，直接在对应代码行点击行号设置断点即可
• 如果需要排查路由匹配逻辑，可直接在VueRouter源码的match方法中设置断点，查看路径匹配的完整过程

待排查的隐含问题点 #

• 你定义了partner_routes、purchase_routes、product_routes三个路由数组，但并没有合并到传入VueRouter的routes数组中，如果其他业务路由写在这三个数组里，需要确认是否存在优先级更高的/product前缀路由（路由匹配按定义顺序生效，前缀匹配的路由会优先命中）
• 确认你是否配置了通配符*的404路由，如果通配符路由写在/product/:id之前，会覆盖所有带参数的路由，通配符路由必须放在所有路由规则的最后
• 如果使用了history路由模式，确认本地开发服务是否开启了historyApiFallback配置，未开启的情况下直接访问带参数路径会被服务器返回首页，看起来类似重定向到Home页
• 注意路由参数存放在$route.params而非$router.params，前者是当前激活的路由信息对象，后者是全局路由实例，不要混淆。

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