Vue Router not matching a url with multiple dynamic values

Question

I am trying to add a nested url to my routes. So far, every route works fine except for the last one (see code below).

I also tried nesting the urls (using the children property), but was unsuccessful with that, and I don't think that's the approach I want to take here anyway, since I want to use an entirely separate component, and not nest the <router-view>s.

Any suggestions for what I should do? I'm not even sure how to debug. The Vue dev tools just show a <RouterView> component, with one prop: name: "default".

Here is my routes.js file:

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 }
  }
});

Try adding a key attribute to the <router-view> component. ie. <router-view :key="$route.fullPath" /> — Ricky Ruiz
– Ricky Ruiz, Commented May 18, 2019 at 20:39

stdob-- · Accepted Answer · 2019-05-19 03:13:35Z

3

The problem is that you try to use the minus sign as the parameter name:

/nutrients/:slug/:nutrient-slug

But the regular expression from the path-to-regexp package for parsing the path-pattern uses the \w character classe as the name-pattern:

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

So use underscore instead of minus:

/nutrients/:slug/:nutrient_slug

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

answered May 19, 2019 at 3:13

stdob--

29.2k6 gold badges62 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joy Over a year ago

Hi have you found out way to fix?

Collectives™ on Stack Overflow

Vue Router not matching a url with multiple dynamic values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related