點燈坊

失くすものさえない今が強くなるチャンスよ

手動加入 Vue Router

Sam Xiao's Avatar 2024-02-26

若一開始建立專案時沒有選擇 Vue Router，也可以日後手動加入 Vue Router，也可藉此了解 Vue Router 的架構。

Version

Vue 3.4
Vue Router 4.2

Install Vue Router

$ npm i vue-router
  • 使用 NPM 安裝 Vue Router

Create index.js

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

export let router = createRouter({
  history: createWebHistory(),
  routes: []
})
  • 在 src 目錄下建立 router 目錄，並建立 index.js，所有的 route 將在此檔案設定

Line 1

import { createRouter, createWebHistory } from 'vue-router'
  • createRouter()：建立 router object
  • createWebHistory()：以 HTML5 Mode 建立

Line 3

import { createRouter, createWebHistory } from 'vue-router'

export let router = createRouter({
  history: createWebHistory(),
  routes: []
})
  • history：使用 creteWebHistory() 建立 HTML5 Mode
  • routes：定義 route，每個 object 由 path、name 與 component 3 個 key 構成

稍後會實際使用 path、name 與 component 定義 route

Use Router

main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import { router } from '@/router/index.js'

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

Line 5

import { router } from '@/router/index.js'
  • 從 src/router/index.js 引用 router object

Line 7

createApp(App).use(router).mount('#app')
  • Vue 使用 router object

App

App.vue

<template>
  <RouterView />
</template>

<script setup>
import { RouterView } from 'vue-router'
</script>

Line 2

<RouterView />
  • <RouterView> 為 Vue Router 內建的 component，Vue Router 將 render 此 component

Create View

src/views/HomeView.vue

<template>
  <main>
    <TheWelcome />
  </main>
</template>

<script setup>
import TheWelcome from '../components/TheWelcome.vue'
</script>
  • 當使用 Vue Router 時，我們會在 src 目錄下另外建立 views 目錄專門放 view，並以 route 實際的 階層 建立 目錄 方便維護
  • 建立 Home 的 view

View Naming Convention

  • View：View 名稱與 File 名稱以 CamelCase 組合 兩個單字 (單一單字 留給 HTML 跟 Vue 以作區別)，假如真的找不到兩個單字，後面加 View

src/views/AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
  • 建立 About 的 view

Define Route

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

export let router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

Line 2

import HomeView from '../views/HomeView.vue'
  • 引用 HomeView

Line 7

{
  path: '/',
  name: 'home',
  component: HomeView
},
  • path：定義 url 路徑
  • name：定義 route 名稱
  • component：定義 route 所對應的 view

此種方式會將此 view 放進同一隻 .js 內

Line 12

{
  path: '/about',
  name: 'about',
  component: () => import('../views/AboutView.vue')
}
  • component：為 function，動態載入 view

此種方式不會將此 view 放進同一隻 .js 內，而是一個 view 一個 .js

Conclusion

  • 當使用 Vue Router 時，切記在 src 目錄下另外建立 views 目錄專門放 view，並以 route 實際的階層建立目錄方便維護
  • 若專案不大，將所有 view 放進單一 .js 即可
  • 實務上的專案都很大，建議使用動態載入 view 方式，如此可減少 .js 的大小，加快載入時間
  • npm run build 時，若單一 js 大於一個 500kb ，Vite 會發出警告

# Vue # Vue Router