今天想要來看看在 vue 中如何連到不同頁面，以 HTML 來說，可以使用 a href 連到相應的 html 檔，但是 vue 的檔案都是以 .vue 結尾，到底怎麼連勒 qaq
於是找到這個酷東西 Vue Router

Vue Router 是什麼

Vue router 是 Vue.js 官方提供的路由工具，讓單頁應用（SPA）能在不重新載入整個頁面的情況下，透過網址對應不同元件畫面。

實作步驟

Step1: 安裝套件

npm add vue-router@latest

Step2: 建立 views
因為會有多個頁面，所以原本寫到 App.vue 首頁的內容會搬到 ./src/views/Home.vue 中。另外，也會多建立一個頁面 About.vue，專案架構會變成以下:

src/
├── assets/               
├── components/           
├── data/                 
├── router/              
├── validation/            
├── views/                
│   ├── About.vue
│   ├── Home.vue
├── App.vue        
├── main.js             
└── style.css             

Step3: 建立 router
在 ./src/router/index.js 中加入 router

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(),
  routes
})

export default router

Step4: 修改 App.vue 和 main.js
App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

main.js

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

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

Step5: 最後，在 Header.vue 中加入不同頁面

<template>
  <header class="header">
    <div class="header-content">
      <h1 class="logo">
        <router-link to="/" class="logo-link">
          ✦ 推甄經驗分享 ✦
        </router-link>
      </h1>
      <nav class="nav-menu">
        <router-link to="/" class="nav-link">首頁</router-link>
        <router-link to="/about" class="nav-link">關於</router-link>
      </nav>
      <button class="add-btn" @click="handleShare">
        ✍ 分享經驗
      </button>
    </div>
  </header>
</template>

小結

• 知道 Vue router 怎麼應用