vue-router的鉤子函數用法實例分析

 更新時間:2019年10月26日 12:44:53   作者:曉筆刀   我要評論
這篇文章主要介紹了vue-router的鉤子函數用法,結合實例形式分析了vue路由鉤子分類及vue-router鉤子函數相關使用技巧,需要的朋友可以參考下

本文實例講述了vue-router的鉤子函數用法。分享給大家供大家參考,具體如下:

vue路由鉤子大致可以分為三類:

1.全局鉤子

主要包括beforeEach和aftrEach,

beforeEach函數有三個參數:

  • to:router即將進入的路由對象
  • from:當前導航即將離開的路由
  • next:Function,進行管道中的一個鉤子,如果執行完了,則導航的狀態就是 confirmed (確認的);否則為false,終止導航。

afterEach函數不用傳next()函數

這類鉤子主要作用于全局,一般用來判斷權限,以及以及頁面丟失時候需要執行的操作,例如:

//使用鉤子函數對路由進行權限跳轉
router.beforeEach((to, from, next) => {
  const role = localStorage.getItem('ms_username');
  if(!role && to.path !== '/login'){
    next('/login');
  }else if(to.meta.permission){
    // 如果是管理員權限則可進入,這里只是簡單的模擬管理員權限而已
    role === 'admin' ? next() : next('/403');
  }else{
    // 簡單的判斷IE10及以下不進入富文本編輯器,該組件不兼容
    if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
      Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器,請使用更高版本的瀏
      覽器查看', '瀏覽器不兼容通知', {
        confirmButtonText: '確定'
      });
    }else{
      next();
    }
  }
})

2.單個路由里面的鉤子

主要用于寫某個指定路由跳轉時需要執行的邏輯

        {
          path: '/dashboard',
          component: resolve => require(['../components/page/Dashboard.vue'], resolve),
          meta: { title: '系統首頁' },
          beforeEnter: (to, from, next) => {
           },
          beforeLeave: (to, from, next) => {
          }
        },

3.組件路由

主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,這幾個鉤子都是寫在組件里面也可以傳三個參數(to,from,next),作用與前面類似.

 beforeRouteEnter(to, from, next) {
  next(vm => {
   if (
    vm.$route.meta.hasOwnProperty('auth_key') &&
    vm.$route.meta.auth_key != ''
   ) {
    if (!vm.hasPermission(vm.$route.meta.auth_key)) {
     vm.$router.replace('/admin/noPermission')
    }
   }
  })
 },

希望本文所述對大家vue.js程序設計有所幫助。

相關文章

  • 詳解VScode編輯器vue環境搭建所遇問題解決方案

    詳解VScode編輯器vue環境搭建所遇問題解決方案

    這篇文章主要介紹了VScode編輯器vue環境搭建所遇問題解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • 詳解Vue基于vue-quill-editor富文本編輯器使用心得

    詳解Vue基于vue-quill-editor富文本編輯器使用心得

    這篇文章主要介紹了Vue基于vue-quill-editor富文本編輯器使用心得,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • Vue.js自定義指令的用法與實例解析

    Vue.js自定義指令的用法與實例解析

    自定義指令是用來操作DOM的。自定義指令就是一種有效的補充和擴展,不僅可用于定義任何的DOM操作,并且是可復用的。這篇文章主要介紹了Vue.js自定義指令的用法與實例解析,一起看看吧
    2017-01-01
  • vxe-table vue table 表格組件功能

    vxe-table vue table 表格組件功能

    這篇文章主要介紹了vxe-table vue table 表格組件功能,功能非常強大,文中給大家提到了功能點,需要的朋友可以參考下
    2019-05-05
  • 基于vue實現圓形菜單欄組件

    基于vue實現圓形菜單欄組件

    這篇文章主要介紹了基于vue實現的圓形菜單欄組件,本文通過實例代碼,圖文詳解的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-07-07
  • Vue.js實現表格動態增加刪除的方法(附源碼下載)

    Vue.js實現表格動態增加刪除的方法(附源碼下載)

    Vue.js通過簡潔的API提供高效的數據綁定和靈活的組件系統。在前端紛繁復雜的生態中,Vue.js有幸受到一定程度的關注,下面這篇文章主要給介紹了Vue.js實現表格動態增加刪除的方法實例,文末提供了源碼下載,需要的朋友可以參考借鑒。
    2017-01-01
  • 基于 Vue.js 2.0 酷炫自適應背景視頻登錄頁面實現方式

    基于 Vue.js 2.0 酷炫自適應背景視頻登錄頁面實現方式

    本文講述如何實現擁有酷炫背景視頻的登錄頁面,瀏覽器窗口隨意拉伸,背景視頻及前景登錄組件均能完美適配,背景視頻可始終鋪滿窗口,前景組件始終居中,視頻的內容始終得到最大限度的保留,可以得到最好的視覺效果
    2018-01-01
  • 詳解使用VUE搭建后臺管理系統(vue-cli更新至3.0)

    詳解使用VUE搭建后臺管理系統(vue-cli更新至3.0)

    這篇文章主要介紹了詳解使用VUE搭建后臺管理系統(vue-cli更新至3.0),小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 詳解基于mpvue的小程序markdown適配解決方案

    詳解基于mpvue的小程序markdown適配解決方案

    本篇文章主要介紹了詳解基于mpvue的小程序markdown適配解決方案,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • 深入理解Vue 組件之間傳值

    深入理解Vue 組件之間傳值

    這篇文章較詳細的給大家介紹了vue組件之間傳值的方法,在 Vue 中,可以使用props向子組件傳遞數據。具體傳遞方法大家跟隨腳本之家小編一起看看吧
    2018-08-08

最新評論

福建体育彩票时时彩11