Vue Router

  npm install vue-router@4
  

  import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/about', name: 'about', component: About },
  { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('../views/NotFound.vue') },
];

export default createRouter({
  history: createWebHistory(),
  routes,
});
  

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

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

  <script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </nav>
  <RouterView />
</template>
  

  { path: '/users/:id', name: 'user', component: UserProfile }
  

  <!-- views/UserProfile.vue -->
<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const user = ref(null);

watch(
  () => route.params.id,
  async (id) => {
    const res = await fetch(`/api/users/${id}`);
    user.value = await res.json();
  },
  { immediate: true }
);
</script>

<template>
  <h1 v-if="user">{{ user.name }}</h1>
  <p v-else>Loading...</p>
</template>
  

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

const router = useRouter();

function goToDashboard() {
  router.push('/dashboard');
}
</script>
  

  router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('token');

  if (to.meta.requiresAuth && !isLoggedIn) {
    next({ name: 'login' });
  } else {
    next();
  }
});
  

  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  

  {
  path: '/admin',
  component: () => import('../views/Admin.vue'),
}