iT邦幫忙

0

Vue Router介紹

vue-router是一個很好用的工具,因為過去在換頁通常會透過後端處理。而目前為了減少讀取時間,目前大多都採用SPA(單頁式應用)來製作,如前端框架,而在切換同時我們還需要控制網址,所以才會有router的出現,vue-router,當我們切換畫面時候也不需向後端發出請求。

安裝:
此處我們是直接使用vue ui進行安裝,如果不使用ui介面的話,透過npm安裝即可。

   npm install vue-router

或是透過cdn直接引入。

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

進入畫面後發現,多出兩個分別為Home、About的頁面,當我們做切換時,網址也會做變化,而在網址的#作用是用來防止換頁,因為目前我們沒有跟任何後端做搭配的動作。

https://ithelp.ithome.com.tw/upload/images/20200728/20126182IaDtVhpL2k.png

而回到我們檔案觀看,可發現main.js多出一個router,並綁至app。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

且我們也可發現多出一個名為router的資料夾,並且有一個為index.js的檔案,而作用是用來定義我們專案有多少路徑的部分,而可看到我們目前有個根目錄Home,一個目錄About,而每一個路徑也會對應到對應的component,而我們在此也增加一個router名為jojo。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// 使用了 Vue.use( VueRouter ),會在 Vue 中增加<router-view/> 與 <router-link/> 這兩個組件
Vue.use(VueRouter)
// 定義我們專案有多少路徑的部分
const routes = [{
    // 每一個路徑也會對應到對應的component,
    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')
  },
  {
    path: '/jojo',
    name: 'Jojo',
    component: () => import( /* webpackChunkName: "about" */ '../views/jojo.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

我們回到App.vue,可以發現template多出了一個router-link的組件及router-view的組件,而router-link用來切換routerrouter-view用來顯示我們與router綁定的component

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

而此時我們切換到畫面,發現我們所新增的路由已經在畫面上,並且切換到那個頁面,網誌及畫面也會跟著做變化,在vue Devtools也能發現總共有三個router link專門切換router,router view專門顯示我們的router component。

https://ithelp.ithome.com.tw/upload/images/20200728/20126182MHSNYidMTP.png

而此時,我們來看看network的部分,重整後發現app.js,about.js都沒有載入進來(狀態為304),而當我們點擊about切換頁面後,發現about.js已經載入進來,並且狀態變為200。

https://ithelp.ithome.com.tw/upload/images/20200728/20126182hCrvaJXCeu.png

https://ithelp.ithome.com.tw/upload/images/20200728/20126182tTPISMSofK.png

而這也跟我們在index.js中,也就是定義我們專案有多少路徑的部分,在定義我們router的組件時做法不同的差異,而上圖為我們採用router lazyload做法,直接透過import去引入他,依照router將code分割,優點在於當我們進入其頁面,才會真正把其頁面的資料載入進來,可以節省一開始的讀取時間,而壞處就是會多一次讀取

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

而如果我們希望在切換頁面時,能夠將其router改變顏色,傳統一般都是套用class去active修改,而vue有提供兩個class分別為.router-link-active,.router-link-exact-active,而router-link-active指經過的目錄(少用).router-link-exact-active指當前頁面,所以當我們點擊到jojo或about頁面時,皆會顯示棕色,而Home一直顯示紅色。

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.router-link-active{
color:red;
}
.router-link-exact-active{
color:brown;
}
</style>

https://ithelp.ithome.com.tw/upload/images/20200728/20126182LFjmgdGBNy.png

巢狀路由

今天如果我想在jojo這個路徑的頁面下在增添其他路徑,達到巢狀路由的架構,那麼該怎麼做呢?

首先我們在index.js的部分,也就是定義路徑的地方加上我們所要增添的路徑,由於我們新增的路徑是要增添在jojo路徑的頁面下,所以我們使用一個屬性children子路由,表示在這層路徑下還要再開一層路徑,而path,name,component一樣比照一般寫法,要注意的是子路徑path的部分前面不用在加'/',如/info(X),info(O)

// 定義我們專案有多少路徑的部分
const routes = [{
    ...
  {
    path: '/jojo',
    name: 'Jojo',
    component: () => import( /* webpackChunkName: "jojo" */ '../views/jojo.vue'),
    // 子路由,表示在這層路徑下還要再開一層路徑
    children: [{
        // 子路徑路由不用再加/,否則會回到根目錄
        path: "info",
        name: "jojo-info",
        component: () => import( /* webpackChunkName: "jojo-info" */ '../views/info.vue')
      },
      {
        path: "youtube",
        name: "jojo-youtube",
        component: () => import( /* webpackChunkName: "jojo-youtube" */ '../views/youtube.vue')
      },
    ]
  },
]

接著再views的資料夾下創建info,youtube子路徑的頁面,並增添我們想顯示的內容,再來我們回到我們的jojo.vue下,注意,Component的最外面只能有一層DOM(此處為div),而我們在底下寫入我們的路徑,而第一個這種寫法,如果資料好幾層,網址越來越長,用to="/.../..."的方法不方便。

<div>
<router-link> to="/jojo/info">info </router-link>
<router-link> to="/jojo/youtube">youtube </router-link>
</div>

所以可以改綁定寫法,由於我們在path部分都有加上name,所以可以直接綁其路由的name=> :to="{name}"

<template>
<div>
Component的最外面只能有一層DOM(此處為div)
<h1>Jojo router</h1>
<div>
      <router-link :to="{name:'jojo-info'}">info</router-link> 
      <router-link :to="{name:'jojo-youtube'}">youtube</router-link>
      </div>
    <router-view/>
</div>
</template>

完成如下。

https://ithelp.ithome.com.tw/upload/images/20200731/20126182JFE9LdxqbX.png


尚未有邦友留言

立即登入留言