Implementing Client-Side Routing with Vue Router 4

// 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: 'User', component: UserProfile, props: true },
  // Catch-all route for 404
  { path: '/:pathMatch(.*)*', name: 'NotFound', redirect: '/' },
];

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

export default router;

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Import the router instance

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

// src/App.vue
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link :to="{ name: 'User', params: { id: 123 }}">User 123</router-link>
  </nav>
  <router-view />
</template>

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

const router = useRouter();

// Example programmatic navigation after a delay
// setTimeout(() => {
//   router.push('/about');
// }, 3000);
</script>

// src/views/HomeView.vue (example)
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>
<script setup></script>

// src/views/AboutView.vue (example)
<template>
  <div>
    <h1>About Us</h1>
    <p>Learn more about our company.</p>
  </div>
</template>
<script setup></script>

// src/views/UserProfile.vue (example)
<template>
  <div>
    <h1>User Profile: {{ id }}</h1>
    <p>Viewing profile for user ID: {{ id }}</p>
    <button @click="goToHome">Go to Home</button>
  </div>
</template>

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

// When props: true is set, route params are passed as component props
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
});

const router = useRouter();
// const route = useRoute(); // Can also access params via route.params.id

const goToHome = () => {
  router.push({ name: 'Home' });
};
</script>