Programmatic Navigation and Route Parameters with Vue Router 4

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

const routes = [
  { path: '/', name: 'Home', component: HomeView },
  { path: '/user/:id', name: 'UserProfile', component: UserProfile, props: true }
];

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

export default router;

// 2. Example component using programmatic navigation (e.g., HomeView.vue)
/*
<template>
  <div>
    <h1>Welcome to the Home Page</h1>
    <p>Navigate to a user profile:</p>
    <button @click="goToUser(1)">Go to User 1</button>
    <button @click="goToUser(2)">Go to User 2</button>
    <button @click="goToAdminPage()">Go to Admin (if exists)</button>
  </div>
</template>

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

const router = useRouter();

const goToUser = (userId) => {
  // Navigate to a named route with parameters
  router.push({ name: 'UserProfile', params: { id: userId } });
};

const goToAdminPage = () => {
  // Navigate to a specific path
  router.push('/admin');
  // Or replace the current history entry
  // router.replace('/admin');
};
</script>
*/

// 3. Example UserProfile component to display parameters (e.g., UserProfile.vue)
/*
<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID from route: {{ userId }}</p>
    <button @click="goBack">Go Back</button>
  </div>
</template>

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

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

// Option 1: Access params directly from useRoute
// const userId = route.params.id;

// Option 2: Define props: true in router config and receive as prop
const props = defineProps({
  id: [String, Number]
});
const userId = ref(props.id);

watchEffect(() => {
  userId.value = props.id;
});

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