Advanced Programmatic Navigation with Vue 3 Router

<!-- App.vue -->
<template>
  <div>
    <h1>Vue 3 Router Programmatic Navigation</h1>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/dynamic/123">Dynamic ID</router-link>
    </nav>
    <hr />

    <button @click="navigateToAbout">Go to About (push)</button>
    <button @click="replaceWithHome">Replace with Home</button>
    <button @click="goBack">Go Back (-1)</button>
    <button @click="goToForward">Go Forward (1)</button>
    <button @click="navigateToDynamicWithQuery">Go to Dynamic with Query</button>

    <router-view />
  </div>
</template>

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

const router = useRouter();

const navigateToAbout = () => {
  router.push('/about'); // Pushes a new entry onto the history stack
};

const replaceWithHome = () => {
  router.replace('/'); // Replaces the current entry in the history stack
};

const goBack = () => {
  router.go(-1); // Navigates one step back in history
};

const goToForward = () => {
  router.go(1); // Navigates one step forward in history
};

const navigateToDynamicWithQuery = () => {
  router.push({
    name: 'Dynamic', // Assuming a named route
    params: { id: 'abc' },
    query: { user: 'john', role: 'admin' }
  });
};
</script>

<!-- router/index.js (example setup - not included in snippet for brevity, but required for app to run) -->
/*
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';
import DynamicView from '../views/DynamicView.vue';

const routes = [
  { path: '/', name: 'Home', component: HomeView },
  { path: '/about', name: 'About', component: AboutView },
  { path: '/dynamic/:id', name: 'Dynamic', component: DynamicView }
];

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

export default router;
*/

<!-- Example HomeView.vue -->
<template>
  <h2>Home Page</h2>
  <p>Welcome to the home page!</p>
</template>

<script setup></script>

<!-- Example AboutView.vue -->
<template>
  <h2>About Page</h2>
  <p>This is the about page.</p>
</template>

<script setup></script>

<!-- Example DynamicView.vue -->
<template>
  <h2>Dynamic Page</h2>
  <p>ID: {{ $route.params.id }}</p>
  <p>Query: {{ $route.query }}</p>
</template>

<script setup></script>