add useRoute
This commit is contained in:
parent
9df1a73bc1
commit
088430e2fb
|
@ -11,7 +11,7 @@ const router = createRouter({
|
|||
routes: [
|
||||
{ path: '/', redirect: '/products' },
|
||||
{ path: '/products', component: AllProducts },
|
||||
{ path: '/products/:pid', component: ProductDetails, props: true },
|
||||
{ path: '/products/:pid', component: ProductDetails },
|
||||
{ path: '/products/add', component: AddProduct }
|
||||
]
|
||||
});
|
||||
|
|
|
@ -3,22 +3,26 @@
|
|||
<h2>{{ title }}</h2>
|
||||
<h3>${{ price }}</h3>
|
||||
<p>{{ description }}</p>
|
||||
<router-link to="/products/p2">Second Products</router-link>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue';
|
||||
import { inject, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default {
|
||||
props: ['pid'],
|
||||
setup(props) {
|
||||
setup() {
|
||||
const products = inject('products');
|
||||
const selectedProdcut = products.value.find(
|
||||
product => product.id === props.pid
|
||||
|
||||
const route = useRoute();
|
||||
const selectedProdcut = computed(() =>
|
||||
products.value.find(product => product.id === route.params.pid)
|
||||
);
|
||||
const title = selectedProdcut.title;
|
||||
const price = selectedProdcut.price;
|
||||
const description = selectedProdcut.description;
|
||||
const title = computed(() => selectedProdcut.value.title);
|
||||
const price = computed(() => selectedProdcut.value.price);
|
||||
const description = computed(() => selectedProdcut.value.description);
|
||||
|
||||
return { title, price, description };
|
||||
}
|
||||
|
|
Reference in New Issue