Programmatic Navigation with Vue Router

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/about', name: 'about', component: AboutView },
  { path: '/dashboard/:id', name: 'dashboard', component: () => import('../views/DashboardView.vue'), props: true }
];

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

export default router;

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

// components/NavigationControls.vue
<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToAbout">Go to About</button>
    <button @click="goToDashboard(123)">Go to Dashboard (ID: 123)</button>
    <button @click="replaceWithAbout">Replace current with About</button>
    <button @click="goBack">Go Back</button>
    <p>Current Route: {{ currentRouteName }}</p>
    <p>Current Path: {{ currentPath }}</p>
    <p>Route ID: {{ routeId }}</p>
  </div>
</template>

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

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

const goToHome = () => {
  router.push('/'); // Navigate to home path
};

const goToAbout = () => {
  router.push({ name: 'about' }); // Navigate by route name
};

const goToDashboard = (id) => {
  router.push({ name: 'dashboard', params: { id } }); // Navigate with params
};

const replaceWithAbout = () => {
  router.replace({ name: 'about' }); // Replace current history entry
};

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

const currentRouteName = computed(() => route.name);
const currentPath = computed(() => route.path);
const routeId = computed(() => route.params.id);

</script>

<!-- Placeholder views for context -->
<!-- views/HomeView.vue -->
<template><div><h1>Home Page</h1></div></template>

<!-- views/AboutView.vue -->
<template><div><h1>About Page</h1></div></template>

<!-- views/DashboardView.vue -->
<template>
  <div>
    <h1>Dashboard for User ID: {{ id }}</h1>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
defineProps(['id']);
</script>