前言

相信碰過vue專案的大家，對於vue-router應該不陌生。

vue-router可以讓頁面轉換的寫法，變得更加簡潔，假如想要讓Header加上當前頁面的class樣式，也不用再給每個頁面都寫網址的判斷公式。

vue-router

是為Vue.JS的官方路由，讓單頁的建置變得更容易。

router-link & router-view

router-link

• 插入同專案的各頁面連結時，不是使用 a標籤，而是使用 自訂元件router-link來建立連結。
• 不重新載入頁面，也能更改URL。

router-view

• 會顯示與URL對應的頁面/元件。用標籤寫 <router-view>以在頁面中插入。

寫法舉例(皆來自官網)

<router-link to="/">Home</router-link>

<router-view></router-view>

同是在HTML檔內的寫法

// 1. 定義組件
const Home = { template: '<div>Home</div>' }

// 2. 定義路由
// 路由(2.)要對應到組件(1.)
const routes = [
  { path: '/', component: Home },
]

// 3. 由VueRouter.createRouter創建路由的實例 - router
// 並且設置 `routes` 
const router = VueRouter.createRouter({
  // 4. 有提供 history 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // 是`routes: routes` 的縮寫
})

// 5. 實例掛載
const app = Vue.createApp({})
app.use(router)
app.mount('#app')

要在JS檔中再定義

如何實現更換頁面

可以透過

router.push(’/...’)、或是有帶網址參數的router.push({ name: 'game', params: { gameId: 'TETRIS' } })

這個方法會自帶history紀錄，所以如果去到下頁後再按上一頁，可以跳回去。

或是用

<router-link :to="...">、或是帶網址參數的<router-link :to="{ name: 'game', params: { gameId: 'TETRIS' }}">

也可以。

這兩種方式分別為 聲明式<router-link :to="...">、編程式router.push(’/...’)

route & router

route

• route 是一個響應式對象。一個結果。
• route.matched、route.path、route.params、route.query，都是可以被取得的。
• 使用範例：可以監聽route.path，來偵測是否切換頁面。以下舉個例子：
  • 綁定active樣式在class。
  • 假如pathname改變了表示換頁了。
  • 用pathname判斷當下active是否要顯示。

<--! route.path -> pathname -->
<router-link :class="{active: pathname === 'home' || pathname === ''}" to="/home"><div>首頁</div></router-link>

寫法示意

router

• route 是一個實例。一個處理事情的中間人。
• 通過createRouter建立的router，我們可以用this.$router的方式來寫，這樣就不需每個組件或頁面中都要寫一次createRouter來導入。
• 使用範例：(上面也有)用來轉換網址，例如使用router.push(’/home’)，是回到home頁面。

結語

假如有點JS基礎，個人認為要看懂這些用法並不難，只差要再看一下像是createRouter的引入方法。

??

在使用了一段時間的vue-router後，有天前輩問我：你知道route和router差在哪嗎？一直以來我都是複製貼上複製貼上，用得很順，一下子居然答不出來QQ，有種這都搞不清楚，之前router都是用假的嗎 的感覺。所以在最後也有補上兩者的差異是什麼，以此小小懺悔。

參考

https://router.vuejs.org/zh/introduction.html
https://juejin.cn/post/7116720209502683172