I've been working on adding a nested url to my routes and have encountered an issue with the last route in my code. Every other route seems to be functioning properly.
I attempted to nest the urls using the children property, but it wasn't successful. However, I don't believe that's the approach I want to pursue anyway because I want to use a completely separate component instead of nesting <router-view>s.
Does anyone have any suggestions on how I can resolve this issue? I'm unsure about how to debug it. When I look at the Vue dev tools, all I see is a <RouterView> component with a prop: name: "default".
Below is a snippet from 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 }
}
});