Vue2.0 探索之路——vue-router入門教程和總結

前言

這是關於vue的第三篇博文。

前兩篇:
Vue2.0 探索之路——生命週期和鉤子函數的一些理解
Vue2.0 探索之路——vuex入門教程和思考

沒想到寫的還有人看，正是由於大家的閱讀和點贊收藏，纔給了我無比的動力。請關注個人專欄，我不會停更的。

最近也一直在想，前端知識怎麼提升，前端知識的碎片化，讓我感受好多好多都不會，以爲這個時候我應該肯定一個方向，重點的培養本身的招牌技能，再加以輔助技能。不過看了不少博文也暫時沒有造成具體的路線，就先暫定寫博文吧。

今天主要講解一下 vue-router 的相關知識，路由路由嘛，在單頁應用裏仍是蠻重要的。

安裝和引入

首先咱們先安裝依賴
npm install vue-router

緊接着項目引入，看下面的圖噢，很是清晰，代碼就本身敲吧。

router.js 的配置

首先引入 vue-router組件，Vue.use是用來加載全局組件的。那下面咱們就開始看看這個VueRouter的寫法和配置吧。

mode:

默認爲hash，可是用hash模式的話，頁面地址會變成被加個#號比較難看了， http://localhost:8080/#/linkParams/xuxiao
因此通常咱們會採用 history模式，它會使得咱們的地址像日常同樣。http://localhost:8080/linkParams/xuxiao

base
應用的基路徑。例如，若是整個單頁應用服務在 /app/ 下，而後 base 就應該設爲 "/app/"。
通常寫成 __dirname，在webpack中有配置。

routes
routes就是咱們的大核心了，裏面包含咱們全部的頁面配置。
path 很簡單，就是咱們的訪問這個頁面的路徑
name 給這個頁面路徑定義一個名字，當在頁面進行跳轉的時候也能夠用名字跳轉，要惟一喲
component 組件，就是我們在最上面引入的 import ...了，固然這個組件的寫法還有一種懶加載

懶加載的方式，咱們就不須要再用import去引入組件了，直接以下便可。懶加載的好處是當你訪問到這個頁面的時候纔會去加載相關資源，這樣的話能提升頁面的訪問速度。
component: resolve => require(['./page/linkParamsQuestion.vue'], resolve)

router的使用

對於vue-router的使用，詳細的能夠看看文檔，可是你知道的，文檔也只是一個指引，具體的實現仍是得靠本身碼代碼喲。不過我把官方文檔放在下面，有興趣的能夠去看看。

router.vuejs.org/zh-cn/index…

我通讀文檔 + 代碼實現再結合平時項目開發的使用狀況，主要講下面幾個點。

router傳參數

在咱們的平時開發跳轉裏，很明顯，傳參數是必要的。那麼在vue-router中如何跳轉，如何傳參數呢。請看下面。

1.路由匹配參數

首先在路由配置文件router.js中作好配置。標紅出就是對 /linkParams/的路徑作攔截，這種類型的連接後面的內容會被vue-router映射成name參數。

代碼中獲取 name的方式以下：

let name = this.$route.params.name; // 連接裏的name被封裝進了 this.$route.params複製代碼

2.Get請求傳參

這個明明實在很差形容啊。不過真的是和Get請求同樣。你徹底能夠在連接後加上?進行傳參。

樣例：http://localhost:8080/linkParamsQuestion?age=18

項目裏獲取：

let age = this.$route.query.age;   //問號後面參數會被封裝進 this.$route.query;複製代碼

編程式導航

這裏就開始利用vue-router講發起跳轉了。其實也很是簡單，主要利用 <router-link>來建立可跳轉連接，還能夠在方法裏利用 this.$router.push('xxx') 來進行跳轉。

樣例： <router-link to="/linkParams/xuxiao">點我不會懷孕</router-link>
上面的這個router-link就至關於加了個可跳轉屬性。

至於this.$router.push這裏直接用官網的荔枝了

// 字符串,這裏的字符串是路徑path匹配噢，不是router配置裏的name
this.$router.push('home')

// 對象
this.$router.push({ path: 'home' })

// 命名的路由 這裏會變成 /user/123
this.$router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢參數，變成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})複製代碼

導航鉤子

導航鉤子函數，主要是在導航跳轉的時候作一些操做，好比能夠作登陸的攔截，而鉤子函數根據其生效的範圍能夠分爲 全局鉤子函數、路由獨享鉤子函數和組件內鉤子函數。

全局鉤子函數

能夠直接在路由配置文件router.js裏編寫代碼邏輯。能夠作一些全局性的路由攔截。

router.beforeEach((to, from, next)=>{
  //do something
  next();
});
router.afterEach((to, from, next) => {
    console.log(to.path);
});複製代碼

每一個鉤子方法接收三個參數：

• to: Route: 即將要進入的目標 路由對象
• from: Route: 當前導航正要離開的路由

• next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

• next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。

  • next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。

  • next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。

確保要調用 next 方法，不然鉤子就不會被 resolved。

路由獨享鉤子函數

能夠作一些單個路由的跳轉攔截。在配置文件編寫代碼便可

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})複製代碼

組件內鉤子函數

更細粒度的路由攔截，只針對一個進入某一個組件的攔截。

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 由於當鉤子執行前，組件實例還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，可是該組件被複用時調用
    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
    // 能夠訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
  }
}複製代碼

鉤子函數使用場景

其實路由鉤子函數在項目開發中用的並非很是多，通常用於登陸態的校驗，沒有登陸跳轉到登陸頁；權限的校驗等等。固然隨着項目的開發進展，也會有更多的功能可能用鉤子函數實現會更好，咱們知道有鉤子函數這個好東西就好了，下次遇到問題腦海就能浮現，噢，這個功能用鉤子實現會比較棒。咱們的目的就達到了。固然，有興趣的能夠再去研究下源碼的實現。開啓下腦洞。

##其餘知識點

滾動行爲

在利用vue-router去作跳轉的時候，到了新頁面若是對頁面的滾動條位置有要求的話，能夠利用下面這個方法。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 指望滾動到哪一個的位置
  }
})複製代碼

scrollBehavior 方法接收 to 和 from 路由對象。
第三個參數 savedPosition 當且僅當 popstate 導航 (mode爲 history 經過瀏覽器的 前進/後退 按鈕觸發) 時纔可用。
這裏就不細緻的講了，文檔都有也很是簡單，記住有這個東西就行。

//全部路由新頁面滾動到頂部：
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

//若是有錨點
scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}複製代碼

路由元信息

這個概念很是簡單，就是在路由配置裏有個屬性叫 meta，它的數據結構是一個對象。你能夠放一些key-value進去，方便在鉤子函數執行的時候用。
舉個例子，你要配置哪幾個頁面須要登陸的時候，你能夠在meta中加入一個 requiresAuth標誌位。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { requiresAuth: true }
    }
  ]
})複製代碼

而後在 全局鉤子函數 beforeEach中去校驗目標頁面是否須要登陸。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //校驗這個目標頁面是否須要登陸
    if (!auth.loggedIn()) {  
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保必定要調用 next()
  }
})複製代碼

這個auth.loggedIn 方法是外部引入的，你能夠先寫好一個校驗是否登陸的方法，再import進 router.js中去判斷。

總結

總的來看，vue-router是比較簡單的，重點就是路由匹配，編程式導航，鉤子函數。這篇只是一個vue-router的實用的知識點的梳理講解，成文有點雜~..~。