今天來稍微介紹一下 Vue-router 這個套件，主要會以 Vue3 的版本為主，畢竟以現在的專案來說，基本上 Vue2 的專案已經建得差不多了，剩下維護的部分很難會碰到需要管 router 的部份，下面先稍微說一下 Vue-router 的基本作用

路由建立

當我們要建立 Vue-router 的時候，我們會新增一個 router 實例

import { createRouter, createWebHashHistory } from 'vue-router';
const root = process.env.VUE_APP_ROOT
let routes = [
    {
        path: `${root}/home`
        name: 'Home',
        component: () => {
            return import("@/pages/home/Home.vue")
        }
    },
]
let router = createRouter({
    routes
})
export default router

並且在 main.js 引用進來

import router from '@/route/index.js'
const app = Vue.createApp({});
app.use(router);
app.mount('#app');

若有將伺服器的重導向轉回 index.html，那麼我們可以將 history 模式打開，在打開之前我們的網址會像是 https://rourDomain/#/home 這個樣子，所有的路由都是建立在 # 號之後，當我們將 # 號去掉，伺服器也將找不到檔案時自動導回 index.html 並且將 router 元件更新成這樣

let router = createRouter({
    history: createWebHashHistory(),
    routes
})

我們的網址就可以比較正常了，像是 https://rourDomain/home

路由守衛

其中除了路由建立，Vue-router 還有一個重要的用途就是路由守衛，可以透過 beforeEach 來將路由更換前做一些檢查

router.beforeEach((to, from, next) => {
    if(權限通過){
        //Vue2 時需要將 next() 寫進來，表示正常導向，但 Vue3 的時候使用 Vue-router 4 不需要寫
    } else if(權限沒通過 && to.path.contain('login')) {
        // next()
    } else {
        next({
            name: "Login"
        })
    }
})

上面這段代碼的用途很單純，若權限通過那麼不採取任何事，若權限沒通過但前往的頁面網址包含 login 那麼也不做任何事，但當權限沒通過想前往其他頁面時就會將頁面直接導向 "Login" 的頁面

在元件中使用 route 操作

我們在 Vue 元件中，可以使用

router.push({
    name: 'Home',
    params: name
})

來將頁面轉換，其中可以像在 login API 成功後，將頁面轉過去，並且攜帶參數，來滿足大部分的使用場景

Vue-router 大致上的用途就像是這樣，其他的內容基本上大同小異，就有用到時再查囉，今天到此結束~