Programmatic Navigation with Vue Router 4

// 1. Basic Vue Router setup (e.g., `src/router/index.js`)
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';
import UserProfile from '../views/UserProfile.vue';

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/about', name: 'about', component: AboutView },
  { path: '/user/:id', name: 'userProfile', component: UserProfile }
];

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

export default router;

// 2. `src/App.vue` (main app component)
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

<script setup>
// No specific script for App.vue here, just shows router-link
</script>

// 3. `src/views/HomeView.vue` (Example of programmatic navigation)
<template>
  <div>
    <h1>Home Page</h1>
    <button @click="goToAbout">Go to About (push)</button>
    <button @click="goToUser(123)">View User 123 (push with params)</button>
    <button @click="replaceWithAbout">Replace with About (replace)</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToAbout = () => {
  router.push('/about'); // Navigates to /about
};

const goToUser = (userId) => {
  router.push({ name: 'userProfile', params: { id: userId } }); // Navigates to /user/123
};

const replaceWithAbout = () => {
  router.replace('/about'); // Navigates to /about, but replaces current history entry
};
</script>

// 4. `src/views/UserProfile.vue` (Example of accessing route params)
<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID: {{ route.params.id }}</p>
    <button @click="goBack">Go Back</button>
  </div>
</template>

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

const route = useRoute();
const router = useRouter();

const goBack = () => {
  router.back(); // Go back one step in history
};
</script>