Day 08: Vue Router 超基本部分

第 12 屆 iThome 鐵人賽

DAY 8

Modern Web

Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理系列第 8 篇

12th鐵人賽

五百億

團隊自討苦吃三十天#像極了愛情

2020-09-16 10:33:58

6159 瀏覽

分享至

基本上使用 Vue CLI 是一定要使用 Router 的啦，如此才是邁向 Vue 完全體的第一步阿，不這樣做就等於失去這辛辛苦苦建立起來的的開發環境意義了，ㄏㄏ其實根本就都不辛苦，這不是 vue create 給他自己跑就結束了嗎 ???

這邊我會拿 Vue Router 官網的例子解說基本概念再配合 CLI 的開發模式來一步步解說。

Vue Router 基本簡單用法

要使用 Router 最簡單且基本要具備的步驟如下:

引入 Vue 及 Vue Router。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

定義組件

官網說到: 
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

模塊化編程就是比如說像我們 CLI 這樣建構出來的專案，元件分得很開，並且只在需要的地方引入
最後依靠比如說 webpack、parcel 這類打包工具來輸出檔案的機制，就是模塊化編程。

其實他沒有一個很明顯的定義分界，當我們看見諸如import... export... require...，基本上和模塊編程都沾得上邊。



let vue1 = {
	template: `<div>負責首頁資訊的組件...</div>`
}

let vue2 = {
	template: `<div>負責文章區塊的組件...</div>`
}

定義路由，以及該路由要使用的組件。

let routes = [
	{ path: '/', component: vue1 },
	{ path: '/article', component: vue2 }
]

創建路由實例並丟給 Vue 掛載

let router = new VueRouter({
	routes
})

let app = new Vue({
  router
}).$mount('#app')

使用 Router

<router-link to="/">前往首頁</router-link>
<router-link to="/article">前往首頁</router-link>

<router-view/>

<router-link> 的部分會被解析成為 <a> 標籤，看我們點什麼連結 <router-view/> 就會負責切換顯示 vue1 vue2 兩個組件，並且網址的部分會透過 window history API 進行切換不重新整理。

而這邊注意 router-link to="/article"，路由定義的 path: '/article'，... article 要對到，才會正確的渲染 vue2。

https://codepen.io/fiftybillionHuang/pen/jOqZWLP

看 CLI 專案

知道基本用法後，現在回到我們的專案 App.vue 這裡首先看到 <router-link> 、 <router-view/>的部分，現在我們知道這是一定可以運作的，所以接下來我們要來查看具體的設定過程。

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

既然是 Vue Router，所以相關的設定想當然就是在 router 裡的 index.js 摟。

index.js 內部

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 注意這邊 export default router 對應到 main.js 的 import
export default router

有沒有發現和基本使用的部分幾乎一模一樣，首先 import Vue 和 Vue Router 進來，在 import 一個要用的 Home 組件，接著就是官網說的使用模塊化機制要 Vue.use。

接著回到原本的步驟

定義組件，或者引入早就設計好的組件 ( Home )
定義路由和路由要使用的組件，不過這裡多了個 name ，以後就知道怎麼用了。
創建實例並掛載
掛載的部分在 main.js 中

main.js 裡面...

import Vue from 'vue'
import App from './App.vue'
// 注意這邊 import router from './router' 就是將已經創建好的實例拿出來
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
	// 然後掛載進來
  router,
  store,
  render: h => h(App)
}).$mount('#app')

透過這樣的模式，清楚看見我們要管理的檔案設定通通都在 router 的 index.js 內，在這邊可以自行建立一個隨意內容的 .vue 檔，並且在 index.js 中的 routes 引入，隨後前往 App.vue 放一個新的 <router-link> 試試，關鍵就是 to="/xxx"，path: "/xxx"，兩個要有對到，然後補充一點:

// /* webpackChunkName: "about" */這個註釋是有含意的，建議前往文件查看
// 不過 webpack 我自己也是有點快看到吐血，就算從頭照著一步步做，也不見得能無痛學會阿

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

ES2015 之後有 import、export 語法，其中 import ( ) 是另外一個用法，用於動態的導入模塊，也就是說可以減少有些在檔案一開始靜態 import 的的模組沒被用到的載入浪費。這裡具體也可以看 Vue異部組件、 MDN 和 webpack 文件1 、文件2。

工商一下，輕巧卻強大的打包工具- Parcel

講那麼多，import ( '放你寫好的 .vue 檔路徑就好了啦' )，webpackChunkName: "about" 什麼的都先不要也沒關西啦，東西沒有要做那麼大搞那麼複雜幹嘛 ? 框架和工具被開發出來是要幫助我們加速開發的，而不是在那邊搞老半天設定的部分結果用不出來，對於這點我真的對 webpack 十分的不滿意，建議大家有時間的話可以玩玩 Parcel ，非常的小巧輕便，也支持 .vue 的開發方式，重要的是，幾乎不需要什麼複雜設定阿 ! 等我這篇 30 天寫完，我就要去玩 Parcel 準備跳槽了啦。