// router/index.js (relevant routes)
import { createRouter, createWebHistory } from 'vue-router';
import ProductList from '../views/ProductList.vue';
import ProductDetail from '../views/ProductDetail.vue';

const routes = [
  { path: '/', component: ProductList },
  { path: '/product/:id', component: ProductDetail },
];

export const router = createRouter({ history: createWebHistory(), routes });


<!-- src/views/ProductList.vue -->
<script setup>
import { ref } from 'vue';
import { RouterLink } from 'vue-router';

const products = ref([
  { id: 1, name: 'Keyboard' },
  { id: 2, name: 'Mouse' },
  { id: 3, name: 'Monitor' },
]);
</script>

<template>
  <ul>
    <li v-for="product in products" :key="product.id">
      <RouterLink :to="`/product/${product.id}`">{{ product.name }}</RouterLink>
    </li>
  </ul>
</template>


<!-- src/views/ProductDetail.vue -->
<script setup>
import { useRoute } from 'vue-router';

const products = [
  { id: 1, name: 'Keyboard' },
  { id: 2, name: 'Mouse' },
  { id: 3, name: 'Monitor' },
];

const route = useRoute();
const product = products.find((p) => p.id === Number(route.params.id));
</script>

<template>
  <div v-if="product">
    <h1>{{ product.name }}</h1>
  </div>
  <p v-else>Product not found.</p>
</template>

<!--
  Notes:
  - :to="`/product/${product.id}`" builds the link URL from the id
    using a template literal (note the v-bind colon since it's an
    expression).
  - route.params.id is always a string, so Number(...) converts it
    before comparing against the numeric product ids.
-->