RouterLink, RouterView and Programmatic Navigation

<!-- App.vue — layout with nav and outlet -->
<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink :to="{ name: 'users' }">Users</RouterLink>
    <RouterLink :to="{ name: 'user-detail', params: { id: 42 } }">
      User #42
    </RouterLink>
  </nav>

  <RouterView />
</template>

<!-- UserDetailView.vue — programmatic nav + route params -->
<template>
  <div v-if="user">
    <h1>{{ user.name }}</h1>
    <button @click="goBack">← Back</button>
    <button @click="goToNext">Next user →</button>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route  = useRoute();
const router = useRouter();
const user   = ref(null);

async function loadUser(id) {
  const res  = await fetch(`/api/users/${id}`);
  user.value = await res.json();
}

onMounted(() => loadUser(route.params.id));

// Re-fetch when :id changes (same component reused)
watch(() => route.params.id, (newId) => loadUser(newId));

const goBack   = ()   => router.back();
const goToNext = ()   => router.push({ name: 'user-detail',
                          params: { id: Number(route.params.id) + 1 } });
</script>