4 | vue cli router
在上一個小節中,我們已經示範如何將VueRouter加入到專案當中,那麼,這個小節將從VueRouter的路由設定檔介紹出發,並透過幾個實際的案例來示範VueRouter的各種功能。小提醒自本章節起,有關VueRouter的解說都會搭配VueCLI/webpack來操作,請讀者多加注意。在上一個小節最後部分曾介紹過,我們可以透過route.js檔案來設定VueRouter的路由,而設定的選項基本上都會放在createRouter這個Option裡頭:import{createRouter,createWebHistory}fromvue-routerimportHomefrom./views/Home.vueimportAboutfrom./views/About.vueexportconstrou...
在上一個小節中,我們已經示範如何將 Vue Router 加入到專案當中, 那麼,這個小節將從 Vue Router 的路由設定檔介紹出發,並透過幾個實際的案例來示範 Vue Router 的各種功能。
小提醒
自本章節起,有關 Vue Router 的解說都會搭配 Vue CLI / webpack 來操作,請讀者多加注意。
在上一個小節最後部分曾介紹過,我們可以透過 route.js 檔案來設定 Vue Router 的路由, 而設定的選項基本上都會放在 createRouter 這個 Option 裡頭:
import { createRouter, createWebHistory } from vue-router import Home from ./views/Home.vue import About from ./views/About.vue export const router = createRouter({ history: createWebHistory(), routes: [ { path: /, component: Home }, { path: /about, component: About }, ], });123456789101112
其中最重要的就是 history 與 routes 兩個部分了。
history 路由模式首先來講講 history,這個選項在 Vue Router v3 以前被稱為 mode, v4 開始改為 history, 指的是 Vue Router 處理前端路由的不同方式,分別是 Hash Mode 以及 HTML5 (History API) Mode 兩種。
Hash 模式在 HTML5 的 History API 還沒出現之前,想要控制 URL 又不能換頁,只能透過 URL hash,也就是 # (井號)。 這個 Hash (#) 原本在網頁裡代表的是「錨點」的含義, # 後面接的是這個網頁的某個位置。
https://book.vue.tw/#app1
...