npm install vue-router

// resources/src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/pages/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/pages/About.vue'),
  },
  {
    path: '/:pathMatch(.*)*', // 捕捉所有未命中路由（404）
    name: 'NotFound',
    component: () => import('@/pages/NotFoundComponent.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_URL), // 使用 HTML5 History 模式
  routes,
});

export default router;

// resources/src/main.js
import { createApp } from 'vue';
import App from '@/components/App.vue';
import router from '@/router/index.js';

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

// routes/web.php

// 所有非 API 請求皆導向 Vue 入口頁
Route::get('/{any}', function () {
    return view('index');
})->where('any', '^(?!api).*$');

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>

  <router-view /> <!-- 顯示符合的頁面元件 -->
</template>

// router/index.js
{
  path: '/courses/:id',
  name: 'CourseDetail',
  component: () => import('@/pages/Courses/_id.vue'),
}

<!-- 使用 router-link 傳入動態參數 -->
<router-link :to="`/courses/${id}`">課程連結</router-link>

// router/index.js
import User from '@/pages/User.vue';
import UserProfile from '@/pages/User/Profile.vue';
import UserPosts from '@/pages/User/Posts.vue';

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
];

<!-- User.vue -->
<template>
  <h1>User Layout</h1>
  <router-view /> <!-- 嵌套路由顯示區 -->
</template>