使用Vue快速開發單頁應用－vue-router

本文所涉及代碼全在vue-cnode

vue-router主要做用是將路由控制，轉移到前端。咱們將會在vue-router裏面保存一個路由表，在vue中具體經過調用提供的指令或則方法進行跳轉。

其實吧，vue-router說白了就是一個插件，對外暴露的也就是指令和方法。若是隻要求靈活用起來，咱們須要學習的也就3個地方：

• 配置路由

• 指令

• 方法

配置路由

路由配置實際上是分兩步的，第一步把vue-router的指令方法掛到Vue實例，第二步纔是添加路由配置上。下面是基本的路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from 'App.vue'
Vue.use(VueRouter) // 第一步
const router = new VueRouter({
  history: true,
  saveScrollPosition: true
}) // 第二步
router.map({
    '/': {
      name: 'index',
      title: '所有',
      component: (resolve) => require(['./components/main/index.vue'], resolve)
    },
    '/good': {
      name: 'good',
      title: '精華',
      component: (resolve) => require(['./components/main/index.vue'], resolve)
    }
  })
router.start(App, '#app')

這裏你們能夠去看看源碼，源碼很簡潔。主要就是聲明瞭一個Router的對象，Router上面插件要的install方法，而後還有start方法。

源碼片斷

class Router {

  constructor ({
    hashbang = true,
    abstract = false,
    history = false,
    saveScrollPosition = false,
    transitionOnLoad = false,
    suppressTransitionError = false,
    root = null,
    linkActiveClass = 'v-link-active'
  } = {}) {
    ....
  }
Router.install = function (externalVue) {
  ....
  Vue = externalVue
  applyOverride(Vue)
  View(Vue)
  Link(Vue)
  util.Vue = Vue
}

源碼中在Router一共有9個方法：

• map

• on

• redirect

• alias

• beforeEach

• afterEach

• go

• replace

• start

• stop

其中start是初始化組件的，

其中涉及路由前期配置的是：map, redirect，alias，beforeEach，afterEach，start。go和replace兩個方法都是路由跳轉的。

map，redirect，alias這3個方法是基礎的配置方法，很簡單，就請看文檔吧。

這裏主要講下beforeEach和afterEach，就和方法名同樣他們分別是在路由跳轉先後作的一些事情。

在vue-router有一個路由聲明週期的概念，這裏不展開來說，你只須要知道咱們berforeEach和afterEach後面接的函數是一個鉤子函數，鉤子函數接受的第一個參數是一個transition對象,transition對象有如下方法，主要是用來控制路由跳轉的。

• transition.to 一個咱們將要跳轉去的路由的對象，這個對象可能有path,name等屬性。

• transition.from 當前路由對象

• transition.next() 調用此函數處理切換過程的下一步

• transition.abort([reason]) 終止切換

• transition.redirect(path) 重定向到另外一個路由

afterEach因爲是路由切換後，只有上面的to,from兩個屬性。

爲何要單獨講beforEach和afterEach，由於咱們能夠在裏面作不少全局的東西。好比登錄跳轉、文章切換title、特定頁面設置屬性、調用vuex的方法等。這裏咱們講一個刷新title的例子。後續還會有一個全局控制的文章，再補充些其餘例子。

單頁應用從始至終都只有會請求一個html，也就須要動態的改變，document title, 咱們徹底能夠將修改title這個過程提到全局，在afterEach裏面作，以下所示：

router.map({
    '/': {
      name: 'index',
      title: '所有',
      component: (resolve) => require(['./components/main/index.vue'], resolve)
    }
  }
  // document title change
  router.afterEach((transition) => {
    document.title = transition.to.title || 'CNode.js'
  })

在ios下面上述方法還不行，由於ios上有一個bug，不會再修改document.title時更新瀏覽器上面的title。由於這裏並非真正刷新頁面，因此ios下不會調用瀏覽器更新title的事件吧。

能夠用一個iframe的hack方法

指令

vue-router 提供的指令就一個：v-link。

他的做用就是跳轉路由。具體用法以下：

<!-- 字面量路徑 -->
<a v-link="'home'">Home</a>

<!-- 效果同上 -->
<a v-link="{ path: 'home' }">Home</a>

<!-- 具名路徑 -->
<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>

詳細的用法建議看文檔

方法

vue在use vue-router以後就會添加一個$route的屬性。裏面有不少屬性，主要的就是router下面的方法。
咱們用的較多的是router.go,還有就是router.on。
這裏仍是建議看文檔，比我搬過來要詳細的多。

原文地址：http://hiluluke.cn/2016/08/05...

其餘

• 使用Vue快速開發單頁應用－主體結構

• 使用Vue快速開發單頁應用－vue-router

• 使用Vue快速開發單頁應用－登陸頁面

• 使用Vue快速開發單頁應用－功能組件與路由組件通訊