// src/router/index.js
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
  }
]
const router = createRouter({
  history: createWebHistory(), // 不帶 # 的 URL
  routes
})
export default router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)  // 別忘了這行！
app.mount('#app')

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 路由名稱跳轉(zhuǎn)（推薦）
router.push({ name: 'about' })
// 路徑跳轉(zhuǎn)
router.push('/about')
// 返回上一頁
router.back()
router.go(-1)
</script>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 獲取路徑參數(shù) /user/:id
console.log(route.params.id)
// 獲取查詢參數(shù) ?keyword=hello
console.log(route.query.keyword)
</script>

<template>
  <router-link to="/about">關(guān)于我們</router-link>
  <router-link :to="{ name: 'home' }">首頁</router-link>
</template>

<!-- App.vue 根組件 -->
<template>
  <div>
    <nav>
      <router-link to="/">首頁</router-link>
      <router-link to="/about">關(guān)于</router-link>
    </nav>
    <!-- 路由頁面在此處顯示 -->
    <router-view />
  </div>
</template>

src/
├── main.js            # 注冊(cè)路由
├── App.vue            # 根組件，包含 <router-view />
├── router/
│   └── index.js       # 路由配置
└── views/
    ├── Home.vue       # 首頁
    └── About.vue      # 關(guān)于頁