Vue.js系列之vue-router(中)（4）

說明：

我們項目現在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
如果大家在實踐的過程中與本文所說的內容有較大區別的話看看是不是版本問題。
本文是一系列文章，在我對Vue有了更深刻的理解認識之後會對文章及時進行修改或更正。歡迎大家批評指出錯誤。以下是已完成的文章列表。

1. Vue.js系列之項目搭建（1）
2. Vue.js系列之項目結構說明（2）
3. Vue.js系列之vue-router(上)（3）

---

補充

對於上篇分享的router.js文件補充以下三點：

1.新建好的router.js文件要想起作用，需要在main.js中import進來。

/*引入路由設置*/
import "./routers.js"

2.如果你在options裏聲明瞭掛載的el，就不用再手動mount了

var app = new Vue({
    el: '#app',  //不需要
    router,
    render: h => h(App) //新添加的函數操作
}).$mount('#app');

3.第二點看到，我們新加了render: h => h(App) 一開始我沒看懂，直接註釋運行看下，結果<div id="app"></div> 這個容器裏面就啥也沒有渲染出來。我也不怎麼理解，如果有大牛清楚的懇請留言指導一下啊。但是我還是查了一下資料。

//=> 是ES6的箭頭語法
// ES5  
(function (h) {  
  return h(App);  
});  

// ES6  
h => h(App); 

官方文檔說明1：

render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 標籤名稱
      this.$slots.default // 子組件中的陣列
    )
  }

官方文檔說明2：
render
類型：Function
詳細：字符串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。render 函數接收一個 createElement 方法作爲第一個參數用來創建 VNode。
我是這麼理解的，我們的路由跳轉時，定位到了一個組件進行渲染，但是之前app這個容器裏面是有其他組件的，我們不能直接添加進去，只能把app裏面的模板文件替換掉，所以用這個字符串模板的代替方案render（不知道對不對，真心請大神指出，大家這裏略過吧）。

懶加載

懶加載的必要性：

1.解決樣式衝突問題
2.解決頁面資源加載問題
3.路由被訪問時才加載對應組件，提高應用加載效率

具體代碼寫法

關鍵我們要做的就是把之前普通import進來的組件定義成異步組件。
前：

import home form "./components/home"  
import login form "./components/login" 

後：

const home = resolve => require(['./home.vue'], resolve)
const login = resolve => require(['./login.vue'], resolve)

Router構造詳細配置

const router = new VueRouter({
    mode: 'history',//history: 依賴 HTML5 History API 和服務器配置。
    base: __dirname,
    linkActiveClass:'link-active',
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }
    routes
}) 

mode
默認’hash’值，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網址瀏覽習慣。
當你使用 history 模式時，URL 就像正常的 url，例如 http://wx.hq88.com/lms/，也好看！

base
默認值: “/”，應用的基路徑，一般就是項目的根目錄，webpack中有配置好。

var projectRoot = path.resolve(__dirname, '../')

linkActiveClass
默認值: “router-link-active”，就是當前組件被激活，相應路由會自動添加類”router-link-active”，這裏是爲了全局設置激活類名，如果不設置，直接用默認的也是可以的。

scrollBehavior
通過這個這個屬性（是個函數），可以讓應用像瀏覽器的原生表現那樣，在按下 後退/前進 按鈕時，簡單地讓頁面滾動到頂部或原來的位置。

完整路由代碼

const scrollBehavior = (to, from, savedPosition) => {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }

routes: [
    {
      path: '/',
      name: 'home',
      component: function(reslove){
        return require(['./components/home'],reslove)
      }
    },
    {
      path: '/login',
      name: 'login',
      component: function(reslove){
        return require(['./components/login/login'],reslove)
      }
    }
 ]
// 創建一個路由器實例,並且配置路由規則
const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    linkActiveClass:'link-active',
    scrollBehavior,
    routes
});
//創建和掛載根實例
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app');

總結

中篇主要對上篇遺漏的點進行了補充，分享了 懶加載的實現以及Router構造詳細配置，最終形成了我們項目中用的router.js。下篇我將繼續分享路由知識，主要是一些小的知識點，但是在應用的過程中不可或缺。

1.當前路由添加激活狀態active-class
2.路由跳轉時添加過渡動效
3.路由傳參及命名路由
4.編程式導航
5.router-link的其他表現形式