title: Vue Router not matching a url with multiple dynamic values
body: <p>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).</p>
  
  <p>I also tried nesting the urls (using the <code>children</code> 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 <code>&lt;router-view&gt;</code>s.</p>
  
  <p>Any suggestions for what I should do? I'm not even sure how to debug. The Vue dev tools just show a <code>&lt;RouterView&gt;</code> component, with one prop: <code>name: "default"</code>.</p>
  
  <p>Here is my routes.js file:</p>
  
  <pre><code>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 }
    }
  });
  </code></pre>