大家好今天是鐵人賽的第19天唷！
vue-router是Vue的路由管理器，用於建立單一頁面應用程式。允許您定義網頁的導航和狀態。

安裝和配置
首先要安裝Vue.js。然後使用npm或yarn安裝Vue-Router：

npm install vue-router
或
yarn add vue-router

通常會在main.js設定vue-router：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入vue-router設置

const app = createApp(App)

app.use(router) // 使用 Vue Router

app.mount('#app')

在Vue-Router中，你可以定義應用程式的路由。每個路由與一個元件相關聯。例如：

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

上面程式碼定義一個路由，分別是/和/about，每個路由都有一個路徑path和關聯的元件component。
在你的Vue元件中，可以使用router-link元件建立路由鏈接，使用router-view元件來渲染目前路由的：

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

導航守衛
用於在導航中執行一些操作。可以在路由配置定義導航守衛驗證使用者權限：

const router = createRouter({
    history: createWebHistory(),
    routes
})
router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !user.isAuthenticated) {
        next('/login')
    } else {
        next()
    }
})

在程式碼中使用beforeEach導航守衛來驗證使用者是否已登入。
如果使用者未登入且存取需要登入權限的頁面，我們將其重新導向到登入頁面。
動態路由
支援動態路由，在路由路徑中使用參數來匹配不同的路由。

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

在元件中，你可以透過$route.params.id來存取動態參數的值。
以上為今天的內容，明天見囉！