tags: Vue.js ItIron2020

前言

前兩天我們介紹了vuex的概念與基本的使用，今天則將目光放到另一個常用的套件-router身上! 馬上就開始吧!

什麼是vue router

有寫過後端的朋友應該對路由(router)的概念不會太陌生，vue-router就是在前端模擬路由的套件，達成切換網址時也切換組件的效果。為什麼要做到這樣呢? 原因在於vue這樣的框架都是為了打造SPA(Single Page Application)，我們其實並不希望在每一次頁面/網址變化時都向後端發送請求，我們只希望變化顯示的頁面! 而藉由模擬路由的方式可以很好的達到這一點!

在專案中加入router

同樣我們假設你是用vue-cli打造專案，你可以透過之前安裝vuex的方案在既有的專案中加入router、或是在專案建構時就選擇需要的套件(之後打造練習專案時會說明)

vue add router

安裝完成後一樣先看一下專案結構的變化

首先在src下增加了兩個資料夾，views & router
先看一下router/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

整隻檔案可分為幾個部分，我們接下來會針對幾個部分做說明!

1. vue & vueRouter的載入與使用
2. 切換時顯示的元件載入
3. routes的設定

認識router-link & router-view

眼尖的你也許發現在剛剛的專案結構中，App.vue也有被修正，修正後的程式碼如下

<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>

由於我們在剛剛的router/index.js中有做到

Vue.use(VueRouter)

在你的vue實體中會新增兩個組件，router-link & router-view，上方的程式碼因此能正常運作! 首先我們要了解這兩個組件的基本概念

• router-view
  router-view簡單說就是你要顯示的組件，當你的路由變化時，它其實就是不斷的在更新router-view這個組件，藉由你設定的路由或是name屬性來控制現在到底要顯示哪個view。

<router-view /> // 基本使用，自動預設name屬性為default
<router-view  name="home"/> // 命名使用，此範例會強制渲染名為home的組件

• router-link

而router-link是用來切換連結的組件，實際上它會渲染出一個a tag做到hyperlink的效果

<router-link to="/">Home</router-link> // 顯示根路由對應的view
<router-link to="/about">About</router-link>  // 顯示/about對應的view

router小試身手

了解完基礎後，我們就來實際體驗一下吧! 請你運行你的伺服器

npm run serve

你會再次看到那個熟悉的頁面，不過這次多了兩個切換連結，Home & About
實際把玩一下並觀察上方網址的變化，相信你會對於router的使用有個初步的概念!

至於為什麼它知道根路徑就要渲染Home組件，而/about就要渲染About組件呢?
這就要回到之前在router/index.js的設定了

// router.index
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
]

在routes陣列中會是一個個物件，每個物件包含著幾個基本的屬性(後續會介紹更多可選options)

1. path

必須以字串表示對應的url，其中'/'自然表示根路由，如果你是在本機運行，就會對應到localhost:8080，這部分還可以加入動態路由的規劃，不過那是明天的內容了:D

2. name
   除了path之外，也可以用name屬性來匹配想對應的組件，name的寫法雖然較為麻煩，但有些人認為這樣有著更高的可讀性，若你想用name配合router-link匹配顯示的組件，必須以bind傳入物件的方式。

<router-link :to="{name: 'Home'}">Home</router-link>

幾個要點需要注意一下

• name屬性與ID一樣，具唯一性，任何重名都會讓vue報錯
• 即便你用name去匹配組件，實際上它還是透過name->找到對應的path->顯示對應的組件，因此上方的url仍是顯示/path而非/name

3. component
   component的部分你可以採用兩種載入方式，一種是利用import將組件先行載入

import Home from '../views/Home.vue'

另一種則是在routes內載入

component: () => import('../views/About.vue')

結語

今天的內容就先講到這邊，router的概念基本上在前端框架中已經一點也不新鮮了，SPA就是建立在router的基礎上，我個人覺得相當的有趣實用~!我們今天簡單介紹了router的安裝與基本使用，明天則會繼續探討像是動態路由、巢狀路由規劃等較為進階的概念，敬請期待~!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D