iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

我的Vue學習筆記系列 第 17

Day17-Vue Router與前端路由管理

  • 分享至 

  • xImage
  •  

什麼是路由?

瀏覽器透過不同的網址,向後端的網頁伺服器發送請求 (Request),而伺服器接收到瀏覽器的請求後, 回應對應的內容給瀏覽器來渲染,這樣的機制我們就稱為網站路由 (Routing) ,管理網站路由的程式通常會被稱作 Router。 —— 重新認識 Vue.js | Kuro Hsu

Vue Router介紹

他的角色有點像是前後端的中繼站的感覺,前端的request直接到中繼站,中繼站直接返還相對應資料,request在中繼站就會被處理。

安裝

新建立的專案可以直接新增router選項

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

若是已建立的就直接到專案目錄下執行

vue add router@next

安裝後會問要不要採history mode(採HTML5的history API來管理前端路由),這邊先選Y

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

安裝就完成了!! src/下也會多了router資料夾

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router

下載後的畫面

載完後其實畫面上已經可以看到預設的樣子了,切換時下方內容做更換

Untitled

分析一下他的內容

Untitled

補充

當功能愈多所產生的檔案就大,在載入的時候可能就會變很慢,如果能將每個路由切割,讓component被使用的時候才去載入,不是一次載入所有,網頁載入會變得更有效率,所以在index.js中可以看到兩種方式載入方式

  1. 一般
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]
  1. 延遲載入Lazy Loading Routes
const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

/* webpackChunkName: "about" */build後可以看到會用命名的字輸出about.c4e4d8bf.js

File                                 Size                                      Gzipped

  dist\js\chunk-vendors.350d8a84.js    113.38 KiB                                41.93 KiB
  dist\js\app.ffdde7a6.js              5.98 KiB                                  2.26 KiB
  dist\js\about.c4e4d8bf.js            0.35 KiB                                  0.27 KiB
  dist\css\app.b229284b.css            0.42 KiB                                  0.26 KiB

參考資料

Vue.js App效能優化: part2 – Lazy loading路由及第三方庫打包反向模式(anti-pattern)
https://sdyou.wordpress.com/2019/03/11/譯效能優化part2-lazy-loading路由及第三方庫打包反向模式anti-pattern/
Vue Router Lazy Loading
https://blog.puckwang.com/post/2019/vue_router_lazy_loading/


上一篇
Day16-Vue CLI 環境設定與打包部屬
下一篇
Day18-Vue Router 路由設定(part1)
系列文
我的Vue學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言