I've gone through the entire process again, cleaning up the code a bit (I'm still learning Vue so my code might be a bit messy) but I can't seem to get the component for the child path to render. It always defaults to the parent path.
This is the code in my products.js file (all paths under products)
import Products from '../views/Products.vue'
import Product from '../views/Product.vue'
export default {
path: '/products',
name: 'Products',
component: Products,
children: [
{
path: ':id',
name: 'OneProduct',
component: Product
}
]
}
This is the code in my product view (the view for the path: /products/:id)
<template>
<div>
<ExpandedProduct
:productName="$route.query.productName"
:price="$route.query.prodPrice"
:description="$route.query.description"
/>
</div>
</template>
<script>
import ExpandedProduct from '../components/ExpandedProduct'
export default {
name: 'Product',
components: {
ExpandedProduct
}
}
</script>
<style lang="scss" scoped>
</style>
The ExpandedProduct component is supposed to be rendered when the route resolves to '/products/:id' This is the code in ExpandedProduct.vue
<template>
<div>
<div class="carousel-holder">
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
></v-carousel-item>
</v-carousel>
</div>
<div class="description-holder">
<h2>{{ $route.query }}</h2>
<h4>{{ $route.query.prodPrice }}</h4>
<h3>{{ $route.query.description }}</h3>
</div>
</div>
</template>
<script>
export default {
name: 'ExpandedProduct',
props: {
productName: {
type: String,
required: true,
default: 'N/A'
},
price: {
type: String,
required: true,
default: 'N/A'
},
description: {
type: String,
required: true,
default: 'N/A'
}
},
data () {
return {
items: [
{ src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg' }
]
}
}
}
</script>
<style lang="scss" scoped>
</style>
If anyone can help me understand what I might be overlooking