承接上文vue2.0一起在懵逼的海洋里越陷越深（一）

說好了一起懵逼，那么我們繼續(xù)下沉

在上一篇里已經(jīng)將vue2.0需要的依賴都裝齊了
那么接下來

作為一個(gè)SPA侥祭，當(dāng)然有不同的地方

SPA與傳統(tǒng)網(wǎng)頁區(qū)別的地方是SPA具有前端路由來模擬頁面跳轉(zhuǎn)，當(dāng)然這是眾多不同之一茄厘，這篇只說前端路由矮冬。
上一篇中有安裝vue-router組件，這個(gè)就是vue的前端路由
vue + vue-router簡直是爽次哈，頁面跳轉(zhuǎn)的速度簡直是不要不要的
不光是用戶體驗(yàn)上的提升胎署，作為一名開發(fā)者，在使用了如vue窑滞，react等這類MVVM框架后琼牧，就不會(huì)再想回到j(luò)Query的時(shí)代了。

前面搞了半天葛假，現(xiàn)在要開始coding啦障陶！

好的，用自己的小編輯器打開vue項(xiàng)目（我用的是sublime）
可以看到項(xiàng)目目錄是這樣子的

files-tree

作為一個(gè)SPA鼓寺，首先要有路由

從目錄圖片里可以看到main.js這個(gè)文件勋拟，沒錯(cuò)這個(gè)就是程序的入口
這個(gè)文件的內(nèi)容是這樣的

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

import App from './App'

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

main.js地址
這里用的是ES6的語法，使用import來導(dǎo)入包
這里導(dǎo)入了vue包妈候，還有兩個(gè)文件敢靡，分別是router.js和App.vue
.js后綴是可以省略的(畢竟是親生的，你不說導(dǎo)入什么類型的文件苦银，肯定是自家人畢竟親呀)
其實(shí).vue后綴也是可以省略的啸胧，我建議還是寫一下，如果遇到兩個(gè)同名文件就尷尬了幔虏。

好的纺念，這個(gè)router.js就是路由的輸出口啦，
App.vue就是目錄里已經(jīng)存在的那個(gè)模板文件啦想括，你的界面就從這里開始啦陷谱。
引入了包就可以開始設(shè)置路由和掛載模板了

順帶一提，可以看到在new Vue()時(shí)傳入了一個(gè)對象瑟蜈，但是這個(gè)對象卻不是鍵值對烟逊，
是這樣，這是ES6的一種語法铺根，當(dāng)引用的變量名和鍵名相同時(shí)宪躯，就可以簡寫成這樣
如果還原來是這樣的

new Vue({
  router: router,
  render: h => h(App)
}).$mount('app')
// 被簡寫成了
new Vue({
  router, // 這是ES6對象的簡寫，擴(kuò)展開就是router: router
  // 箭頭函數(shù)(=>)是ES6的新語法
  render: h => h(App) // 這里擴(kuò)展開就是render: (h) => { return h(App) }
}).$mount('app')

PS：ES6的新語法現(xiàn)在網(wǎng)上文章已經(jīng)有很多了夷都，我之后也會(huì)發(fā)一版常用的語法

那么現(xiàn)在在src目錄下創(chuàng)建router.js文件

內(nèi)容是這樣的：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

// 告訴vue要使用router
Vue.use(VueRouter)

/* eslint-disable no-new */
// 實(shí)例化router對象
const router = new VueRouter({
  mode: 'hash', // 設(shè)置路由模式 可選值: "hash" | "history" | "abstract"眷唉，默認(rèn)"hash"
  linkActiveClass: 'u-link--Active', // 這是鏈接激活時(shí)的class
  // base: '/app/', // 這個(gè)是設(shè)置根目錄路徑，一般用不到囤官，默認(rèn)'/'
  routes // 掛載路由集合 后面會(huì)說
})
// 導(dǎo)出router對象
export default router

這是router.js地址
這里引入了兩個(gè)包vue,vue-router和一個(gè)包含路由集合的routes.js文件
整個(gè)文件的邏輯就是冬阳，使用Vue.use()方法告訴vue我們使用了路由
然后就大大方方的導(dǎo)出路由對象

main.js router

在src目錄下創(chuàng)建routes.js文件

routes.js是用來放置路由集合的文件
其實(shí)路由集合是可以寫在router.js里的党饮，這里為什么不寫在一起呢肝陪？
因?yàn)楫?dāng)路由集合變得龐大時(shí)，如果還是寫在router.js里刑顺，就會(huì)顯得擁擠氯窍，不便于閱讀
所以這里推薦單獨(dú)寫出來。
同時(shí)呢也可以創(chuàng)建路由所對應(yīng)的模板文件(.vue文件蹲堂，我把它稱為模板文件)狼讨，Article.vue和Home.vue
模板文件叫什么名由自己決定，于是就能看到這張圖里所有文件都齊了

files-tree

那么在編寫routes.js文件之前柒竞，需要先寫好兩個(gè)模板的內(nèi)容(不然一會(huì)有沒有成功都不清楚了政供，23333)

好的，貼一下home.vue的內(nèi)容

<template lang="pug">
.home
  h1.l-ta--c Material Desgin
</template>

<script>
  export default {
    data () {
      return {
      }
    }
  }
</script>

<style lang="stylus">
</style>

vue模板是html結(jié)構(gòu)的，這也是對界面編寫最友好的方式
里面的<template> </template>標(biāo)簽就是視圖
<script></script>就是js布隔，這個(gè)沒有爭議
<style></style>是寫css的离陶，這個(gè)也沒有問題
但是當(dāng)仔細(xì)看我的代碼，發(fā)現(xiàn)里面html使用了pug衅檀，css使用了stylus
其實(shí)不用他們也是可行的招刨，只是用pug和stylus寫結(jié)構(gòu)比較清晰
不用也可以的
如果要使用，請打開你的終端哀军，給項(xiàng)目添加幾個(gè)包

npm i pug stylus stylus-loader -D

里面的css的class(.l-ta--c)看著有點(diǎn)懵逼的沉眶，可以看看使用BEM+emmet的css書寫與命名技巧
好的，模板不需要太復(fù)雜排苍，只要有字能顯示就好了沦寂，至于Article.vue也是一樣的学密，這里就不貼了

Tips：模板里推薦有一個(gè)根元素淘衙，就像這里的.home就是根元素，這樣不容易混亂腻暮，結(jié)構(gòu)會(huì)清晰

寫好了模板就可以開始編寫routes.js了

先貼代碼!

// 導(dǎo)入之前寫好的兩個(gè)模板
import Home from './components/Home.vue'
import Article from './components/Article.vue'

// 編寫路由集合
const routes = [
  {
    name: 'Home', // 路由名彤守，這個(gè)字段是可選的
    path: '/', // 路由路徑，這里是根路徑所以是'/'
    component: Home // 模板
  }, // 這些是常用的
  {
    name: 'Article',
    path: '/article',
    component: Article
  }
]
// 導(dǎo)出路由集合
export default routes

然后是文件地址
最后導(dǎo)出了路由集合(routes)后就可以在router.js里使用了
于是哭靖，前面的router.js里的routes就有了具垫。

現(xiàn)在進(jìn)行最后一步，到App.vue里添加路由

代碼如下：

<template lang="pug">
  .app
    header
      //- 制作一個(gè)跳轉(zhuǎn)鏈接
      //- 這里不要直接用a鏈接跳轉(zhuǎn)试幽，那樣會(huì)導(dǎo)致頁面重載筝蚕，
      //- 相比之下用router-link是高效的方案
      //- to屬性就是鏈接的地址啦
      router-link(to="/") home
      router-link(to="/article") article
    bodyer
      //- 路由地址所對應(yīng)的模板將會(huì)被掛載到router-view標(biāo)簽上
      router-view
</template>

<script>
  export default {
    data () {
      return {
      }
    }
  }
</script>

<style lang="stylus">
</style>

地址
好了，到此為止就完成了路由搭建與使用了铺坞。