Vue Router не соответствует URL с несколькими динамическими значениями - PullRequest
Новая
       3

Vue Router не соответствует URL с несколькими динамическими значениями

0 голосов
/ 18 мая 2019

Я пытаюсь добавить вложенный URL в мои маршруты. Пока что все маршруты работают нормально, кроме последнего (см. Код ниже).

Я также пытался вложить URL-адреса (используя свойство children), но безуспешно с этим, и я не думаю, что это подход, который я хочу использовать здесь, так как я хочу использовать совершенно отдельный компонент, а не гнездо <router-view> с.

Есть предложения, что мне делать? Я даже не уверен, как отлаживать. Инструменты Vue dev просто показывают компонент <RouterView> с одной пропеллой: name: "default".

Вот мой файл route.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 }
  }
});

1 Ответ

2 голосов
/ 19 мая 2019

Проблема в том, что вы пытаетесь использовать знак minus в качестве имени параметра: 

/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/]

...