Javascript Vue路由器不匹配具有多个动态值的url

我正在尝试将嵌套url添加到我的路由中。到目前为止，除了最后一条路线（见下面的代码），每条路线都运行良好

我也尝试过嵌套URL（使用

children

属性），但没有成功，我不认为这是我想在这里采用的方法，因为我想使用一个完全独立的组件，而不是嵌套

属性

对我应该做什么有什么建议吗？我甚至不知道如何调试。Vue开发工具只显示一个

组件，其中有一个属性：

名称：“default”

这是我的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: '/:id',
    component: FoodItem
  },
  {
    path: '/nutrients/:slug',
    component: NutrientCategory
  },
  {
    path: '/nutrients/:slug/:nutrient-slug',
    component: NutrientDetail
  }
]

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

---

问题是您试图使用

减号
作为参数名称：

/nutrients/:slug/:nutrient-slug

但是用于解析路径模式的包中的正则表达式使用
\w
字符类作为名称模式：

\w+ matches any word character (equal to [a-zA-Z0-9_])

因此，请使用下划线而不是减号：

/nutrients/:slug/:nutrient_slug

[]
问题是您试图使用
减号
作为参数名称：

/nutrients/:slug/:nutrient-slug

但是用于解析路径模式的包中的正则表达式使用
\w
字符类作为名称模式：

\w+ matches any word character (equal to [a-zA-Z0-9_])

因此，请使用下划线而不是减号：

/nutrients/:slug/:nutrient_slug

[]
尝试将
键
属性添加到
组件。不幸的是，这并没有什么不同。请尝试向
组件添加
键
属性。不幸的是，这没什么区别。也许你可以帮我。看看这个：也许你能救我。看看这个：