npm install vue-router

src/
├── components/
│   ├── Home.vue
│   ├── About.vue
├── router/
│   ├── index.js
├── App.vue
└── main.js

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

export default router;

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

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

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home Page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the About Page!</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

const routes = [
  { path: '/user/:id', component: User }
];

<template>
  <div>
    <h1>User Page</h1>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'User'
};
</script>

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // เปลี่ยนเป็นเงื่อนไขจริง
  if (to.path === '/protected' && !isAuthenticated) {
    next('/'); // เปลี่ยนเส้นทางไปหน้า Home
  } else {
    next();
  }
});