Vue Router无法匹配含多个动态参数的URL问题求助

看起来你的问题主要出在两个关键地方：路由参数的命名格式，以及路由的匹配顺序。让我一步步帮你搞定：

1. 修复路由参数的命名 #

你最后一条路由里的参数:nutrient-slug包含了横杠，这在Vue Router里是不合法的——因为路由参数最终会作为JavaScript对象的属性名，而JS属性名不能直接用横杠（除非用字符串形式，但会导致Vue Router的参数解析异常）。你需要把它改成合法的命名，比如驼峰式nutrientSlug或者下划线式nutrient_slug。

2. 调整路由匹配顺序 #

Vue Router是从上到下按顺序匹配路由的，虽然你的/:id是单段路径，不会直接拦截三段的/nutrients/:slug/:nutrientSlug，但为了避免潜在的匹配冲突（比如未来新增的路由），最好把更具体、更长的路由放在前面，把通用的短路由（比如/:id）放在最后。

修改后的routes.js代码 #

import VueRouter from 'vue-router';
import Search from './views/Search';
import FoodItem from './views/FoodItem';
import NutrientCategory from './views/NutrientCategory';
import NutrientDetail from './views/NutrientDetail';

let routes = [
  { path: '/', component: Search },
  // 把更具体的路由放在前面，优先匹配
  { path: '/nutrients/:slug/:nutrientSlug', component: NutrientDetail },
  { path: '/nutrients/:slug', component: NutrientCategory },
  // 通用的单段路由放在最后，避免拦截其他路由
  { path: '/:id', component: FoodItem }
]

export default new VueRouter({
  routes,
  linkActiveClass: 'active',
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
});

额外调试小技巧 #

• 你可以在组件里通过this.$route.params打印参数，确认是否正确获取到了slug和nutrientSlug。比如在NutrientDetail组件的created钩子中：

created() {
  console.log('当前路由参数:', this.$route.params);
}

• 打开Vue Devtools的「Routes」面板，查看当前匹配的路由规则，这样能快速定位是哪条路由被触发了，比只看RouterView组件更直观。

这样修改后，你的最后一条路由应该就能正常匹配了，而且完全不需要使用嵌套的<router-view>，符合你想要用独立组件的需求。

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