javascript - Vue Router 不匹配具有多个动态值的 url

Question

我正在尝试向我的路线添加嵌套网址。到目前为止，除了最后一条之外，每条路线都运行良好(请参见下面的代码)。

我还尝试嵌套网址(使用 children 属性)，但没有成功，而且我不认为这是我想要在这里采用的方法，因为我想使用一个完全独立的组件，并且不嵌套 <router-view> s。

对于我应该做什么有什么建议吗？我什至不知道如何调试。 Vue 开发工具仅显示 <RouterView>组件，只有一个 prop:name: "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 }
  }
});

Answer 1

问题是您尝试使用减号作为参数名称:

/nutrients/:slug/:nutrient-slug

但是来自 path-to-regexp 的正则表达式用于解析路径模式的包使用 \w 字符类作为名称模式:

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

所以使用下划线而不是减号:

/nutrients/:slug/:nutrient_slug

[https://jsfiddle.net/fhrekL25/ ]