vue2.0一塊兒在懵逼的海洋裏越陷越深（二）

承接上文vue2.0一塊兒在懵逼的海洋裏越陷越深（一）

說好了一塊兒懵逼，那麼咱們繼續下沉

在上一篇裏已經將vue2.0須要的依賴都裝齊了
那麼接下來

由於vue最後生成的頁面看似靜態頁面(對於靜態頁面這裏有些偷雞用法，無論你怎樣，反正我已經露出了詭異的微笑?，再貼一個vue2.0 demo的項目地址，大爺有興趣可進去看看演示，開心了就加個星)，其實倒是個SPA(單頁面應用)
沒錯！就是一個SPA

做爲一個SPA，固然有不一樣的地方

SPA與傳統網頁區別的地方是SPA具備前端路由來模擬頁面跳轉，固然這是衆多不一樣之一，這篇只說前端路由。
上一篇中有安裝vue-router組件，這個就是vue的前端路由
vue + vue-router簡直是爽，頁面跳轉的速度簡直是不要不要的
不光是用戶體驗上的提高，做爲一名開發者，在使用瞭如vue，react等這類MVVM框架後，就不會再想回到jQuery的時代了。

前面搞了半天，如今要開始coding啦！

好的，用本身的小編輯器打開vue項目（我用的是sublime）
能夠看到項目目錄是這樣子的

(插一句，若是喜歡這個sublime主題能夠查看這篇文章)
與本身的目錄對比發現少幾個文件，那是沒有什麼關係的，接下來要作的就是去建立這些文件。

做爲一個SPA，首先要有路由

從目錄圖片裏能夠看到main.js這個文件，沒錯這個就是程序的入口
這個文件的內容是這樣的

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來導入包
這裏導入了vue包，還有兩個文件，分別是router.js和App.vue
.js後綴是能夠省略的(畢竟是親生的，你不說導入什麼類型的文件，確定是自家人畢竟親呀)
其實.vue後綴也是能夠省略的，我建議仍是寫一下，若是遇到兩個同名文件就尷尬了。

好的，這個router.js就是路由的輸出口啦，
App.vue就是目錄裏已經存在的那個模板文件啦，你的界面就從這裏開始啦。
引入了包就能夠開始設置路由和掛載模板了

順帶一提，能夠看到在new Vue()時傳入了一個對象，可是這個對象卻不是鍵值對，
是這樣，這是ES6的一種語法，當引用的變量名和鍵名相同時，就能夠簡寫成這樣
若是還原來是這樣的

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

PS：ES6的新語法如今網上文章已經有不少了，我以後也會發一版經常使用的語法

那麼如今在src目錄下建立router.js文件

內容是這樣的：

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

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

/* eslint-disable no-new */
// 實例化router對象
const router = new VueRouter({
  mode: 'hash', // 設置路由模式 可選值: "hash" | "history" | "abstract"，默認"hash"
  linkActiveClass: 'u-link--Active', // 這是連接激活時的class
  // base: '/app/', // 這個是設置根目錄路徑，通常用不到，默認'/'
  routes // 掛載路由集合 後面會說
})
// 導出router對象
export default router

這是router.js地址
這裏引入了兩個包vue,vue-router和一個包含路由集合的routes.js文件
整個文件的邏輯就是，使用Vue.use()方法告訴vue咱們使用了路由
而後就大大方方的導出路由對象

這個時候main.js裏就能夠接受到這裏導出的路由對象，並掛載到vue對象上

在src目錄下建立routes.js文件

routes.js是用來放置路由集合的文件
其實路由集合是能夠寫在router.js裏的，這裏爲何不寫在一塊兒呢？
由於當路由集合變得龐大時，若是仍是寫在router.js裏，就會顯得擁擠，不便於閱讀
因此這裏推薦單獨寫出來。
同時呢也能夠建立路由所對應的模板文件(.vue文件，我把它稱爲模板文件)，Article.vue和Home.vue
模板文件叫什麼名由本身決定，因而就能看到這張圖裏全部文件都齊了

那麼在編寫routes.js文件以前，須要先寫好兩個模板的內容(否則一會有沒有成功都不清楚了，23333)

好的，貼一下home.vue的內容

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

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

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

vue模板是html結構的，這也是對界面編寫最友好的方式
裏面的<template> </template>標籤就是視圖
<script></script>就是js，這個沒有爭議
<style></style>是寫css的，這個也沒有問題
可是當仔細看個人代碼，發現裏面html使用了pug，css使用了stylus
其實不用他們也是可行的，只是用pug和stylus寫結構比較清晰
不用也能夠的
若是要使用，請打開你的終端，給項目添加幾個包

npm i pug stylus stylus-loader -D

裏面的css的class(.l-ta--c)看着有點懵逼的，能夠看看使用BEM+emmet的css書寫與命名技巧
好的，模板不須要太複雜，只要有字能顯示就行了，至於Article.vue也是同樣的，這裏就不貼了

Tips：模板裏推薦有一個根元素，就像這裏的.home就是根元素，這樣不容易混亂，結構會清晰

寫好了模板就能夠開始編寫routes.js了

先貼代碼!

// 導入以前寫好的兩個模板
import Home from './components/Home.vue'
import Article from './components/Article.vue'

// 編寫路由集合
const routes = [
  {
    name: 'Home', // 路由名，這個字段是可選的
    path: '/', // 路由路徑，這裏是根路徑因此是'/'
    component: Home // 模板
  }, // 這些是經常使用的
  {
    name: 'Article',
    path: '/article',
    component: Article
  }
]
// 導出路由集合
export default routes

而後是文件地址
最後導出了路由集合(routes)後就能夠在router.js裏使用了
因而，前面的router.js裏的routes就有了。

如今進行最後一步，到App.vue裏添加路由

代碼以下：

<template lang="pug">
  .app
    header
      //- 製做一個跳轉連接
      //- 這裏不要直接用a連接跳轉，那樣會致使頁面重載，
      //- 相比之下用router-link是高效的方案
      //- to屬性就是連接的地址啦
      router-link(to="/") home
      router-link(to="/article") article
    bodyer
      //- 路由地址所對應的模板將會被掛載到router-view標籤上
      router-view
</template>

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

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

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