今天要學習 router 路由，簡單來說就是我們的網站中透過網址的不同結構，切換並顯示網站內不同的頁面內容
當 user 透過瀏覽器訪問某個特定的網址時，網站會根據這個網址對應的路由設定，回應對應的頁面資料，使的我們的網站元素更豐富

有鑑於之前的專案已經太多元件了，我決定再開一個新的目錄
開啟 Terminal

先安裝 router 相關套件

開一個新的專案，可參考第二篇

在 main.js 加入 router 並使用在 createApp

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

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

建立新檔案： src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const About = () => import('../views/About.vue')

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

export default createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

接著建立新檔案： src/views/Home.vue & src/views/About.vue

<template><h2>Home</h2></template>

<template><h2>About</h2></template>

最後 App.vue

<template>
  <h1>Hello App!</h1>
  <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main><RouterView /></main>
</template>

<style scoped>
  nav{
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
</style>

就可以 npm run dev 起來看結果了
預設會在根路徑

點 Go to About 就可以切換到 /about 路由，再次點一次 Go to Home 就可以回到根路由