這里是《Vue2.0 從零開始學系列筆記》的第三篇博文,博主小呆是一名互聯網非著名的半吊子前端,喜歡學習新技術,受到一些前輩的影響,多少也寫過一些筆記和學習心得,但是很遺憾沒有一個是成系列的╮(╯▽╰)╭,這次小呆下定決心了,不僅要寫一個成品系列文章出來,而且還要把之前沒寫完的坑補上,最近一直在學Vue2.0相關的東西,所以就拿它開刀了。

你能看到這篇文章,說明小呆沒有像之前寫筆記一樣太監掉(得意~<( ̄ˇ ̄)/),那就繼續往下看吧。

上一篇筆記小呆記述了Vue2.0的組成以及ES6的兩個知識點,這篇筆記我們來寫寫路由相關的東西吧。


關于路由

在開發傳統應用時,我們瀏覽不同頁面時是需要進行頁面跳轉的而且跳轉的控制是由后端開發人員控制的,這種跳轉有個很大的缺點就是新頁面在未加載出來之前有一個空白期,丑的可怕。

而在SPA應用中,由于是單頁面應用,所以我們只有一個html文件,所有的頁面展示,跳轉,渲染都是在這一個html里進行的。所以需要一個管理工具幫助我們管理頁面的渲染,跳轉。而通過路由來渲染頁面,我們便可以擺脫煩人的空白期,而且更有利于前后分離(終于有一種我寫的頁面在我的掌握之中了)。


安裝

在Vue的世界里,我們使用官方推薦的插件vue-router來作為我們路由的管理工具,最新版的vue-cli里,已經集成安裝了vue-router(路由插件)功能,所以我們在上一篇筆記中的App.vue中看到了<router-view></router-view>標簽,在main.js中看到了router的加載以及使用。作為一個前端來說,會用不會裝還是很尷尬的,所以還是要來簡單介紹一下vue-router的安裝方法:

npm install vue-router -save-dev

引用及使用

簡單介紹完如何安裝之后,我們來講講在vue-cli里如何引用插件,上一篇筆記當中,我們在main.js文件里面看到過一段代碼(如下),實際上我們也說到了其實它是加載了router文件夾下的index.js???,我們打開index.js

//main.js
import router from './router'
//引用vue???import Vue from 'vue'
//引用vuerouter???import Router from 'vue-router'
//引用Hello.vue組件
import Hello from 'components/Hello'
//啟用router??椋ㄗ⒁庵灰檬俏扌У?,必須配合啟用命令才能使用)
Vue.use(Router)

// 實例化router對象
export default new Router({
  routes: [
    {
      path: '/',  // 路由路徑,這里是根路徑所以是'/'
      name: 'Hello',  // 路由名,這個字段是可選的
      component: Hello // 模板
    }
  ]
})

首先我們引用vue??楹蛌ue-router???,然后通過Vue.use()啟動我們的vue-router???,最后我們通過new的方式來實例化Router對象。配置參數我們目前先只理解routes參數就好了,通過對routes參數的配置,我們便可以自由的配置頁面的跳轉啦。

而當路由匹配到url路徑之后,就會在<router-view></router-view>里面將對應的模板渲染出啦。接下來我們便寫一個組件試試吧:

  1. 在src目錄下新建pages文件夾
  2. 在pages文件夾下新建index.vue和my.vue

這里我們將pages目錄用作存放我們的頁面級組件,把原有的components目錄用作存放我們的零件組件,打開index.vue和my.vue寫點東西吧:

<!-- index.vue -->
<template>
    <h1>這里是首頁喲</h1>
</template>
<!-- my.vue -->
<template>
  <h1>這里是我的頁面呢</h1>
</template>

OK,頁面寫好了,我們去配置一下routes吧:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import index from 'pages/index.vue'
import my from 'pages/my.vue'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: index
    },
    {
      path: '/my',
      name: 'My',
      component: my
    }
  ]
})

路由也配好了,我們在到App.vue加兩個超鏈接進行跳轉吧:

<template>
  <div id="app">
    <router-link tag="a" to="/" exact>首頁</router-link>
    <router-link tag="a" to="/my" exact>我的</router-link>
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

我們通過<router-linl></router-link>標簽來設置跳轉,默認它會渲染成為一個a標簽,如果你希望使用其他標簽,更改tag屬性即可,to屬性用來告訴vue-router將要跳轉的地址。下圖為我們點擊跳轉后的效果:

<router-link tag="a" to="/" exact>首頁</router-link>
//默認渲染為a標簽
<a href="/">首頁</a>


優化

到這里,可能有些童鞋會問小呆,如果頁面很多,那么router/index.js豈不是很長很長,能不能把路由的routes和配置文件分開呢?(哇塞,這位童鞋你問的真棒?。┙酉呂蔥〈粢檔木褪僑綰胃憬蕕墓芾砦頤塹膔outes。

router目錄下新建routes.js

//routes.js
import index from 'pages/index.vue'
import my from 'pages/my.vue'

const routes = [
  {
    path: '/',
    name: 'Index',
    component: index
  },
  {
    path: '/my',
    name: 'My',
    component: my
  }
]

export default routes

我們把需要渲染的頁面都放到routes.js里面進行管理,并通過創建一個常量來配置我們的路由路徑,最后通過我們上一篇筆記學到的export default命令把接口暴露出去。

我們在ES5中聲明變量都是用var,并且知道變量有全局變量和局部變量,在ES6中,新加了兩個聲明變量的方式:letconst命令,let命令用來聲明塊級變量,const命令用來聲明常量。常量的意思就是:它只是只讀狀態,一旦聲明,便不可以修改了。這里我們的routes配置便用一個const命令來聲明。

更多關于let和const命令的知識,請閱讀小呆的另一篇專門介紹let和const的筆記《ES6新手入門全過程(一):let和const命令》

最后我們在index.js里面將優化后的routes引用進來:

//index.js
import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes.js'
Vue.use(Router)

export default new Router({
  routes
})

結語

OK,到這里,路由的基本使用方法就記述完了,還是繼承小呆的一貫風格,用到哪,學到哪,所以關于vue-router的更多高級功能,等我們以后用到的時候再學吧。到目前為止,小呆已經記述了三篇筆記了,三篇筆記的內容對于一些童鞋來說可能還是略過簡單,一句話就是:有多大本事干多大事。 小呆不指望目前能夠像一些大神一樣去講解源碼,講解很深奧的東西,只是希望通過自己的理解,能夠讓更多像小呆一樣的人使用起來一些新的框架,新的知識。

好啦,啰嗦了半天,如果你喜歡小呆的筆記,那么就在下方點個喜歡的同時分享給更多的人看吧。