欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 路由守衛(wèi)(導航守衛(wèi))及其具體使用

 更新時間：2020年02月25日 10:31:43   作者：不會代碼的前端  
這篇文章主要介紹了vue 路由守衛(wèi)(導航守衛(wèi))及其具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

最近在學習vue，感覺路由守衛(wèi)這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記

官方文檔

導航守衛(wèi)其實也是路由守衛(wèi)，也可以是路由攔截，我們可以通過路由攔截，來判斷用戶是否登錄，該頁面用戶是否有權限瀏覽，需要結合meta來實現(xiàn)

vue中路由守衛(wèi)一共有三種，一個全局路由守衛(wèi)，一個是組件內路由守衛(wèi)，一個是router獨享守衛(wèi)

所謂的路由守衛(wèi)可以簡單的理解為一座房子的門口的保安，想要進入這個房子就必須通過保安的檢查，要告訴路由守衛(wèi)你從哪里來？總不能隨便陌生人就給放進去？要到哪里去？然后保安再告訴你下一步該怎么做？如果你的確是這個房子主人允許進入的人，那就讓你進入，否則就要打電話給房子主人，跟房主商量(登錄注冊)，給你權限。

// 通過這個匹配判斷是否有該權限或要求，這個一般作為頁面權限設置，比如哪些頁面需要登錄才能進入，哪些不需要
to.matched.some(res => res.meta.requireAuth)

一、全局路由守衛(wèi)

所謂全局路由守衛(wèi)，就是小區(qū)大門，整個小區(qū)就這一個大門，你想要進入其中任何一個房子，都需要經過這個大門的檢查
全局路由守衛(wèi)有個兩個：一個是全局前置守衛(wèi)，一個是全局后置守衛(wèi)

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪個頁面去？
  console.log(from) => // 從哪個頁面來？
  next() => // 一個回調函數(shù)
}
router.afterEach（to，from） = {}

next()：回調函數(shù)參數(shù)配置

next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址

next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項

二、組件路由守衛(wèi)

// 跟methods: {}等同級別書寫，組件路由守衛(wèi)是寫在每個單獨的vue文件里面的路由守衛(wèi)
beforeRouteEnter (to, from, next) {
  // 注意，在路由進入之前，組件實例還未渲染，所以無法獲取this實例，只能通過vm來訪問組件實例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一頁面，刷新不同數(shù)據(jù)時調用，
}
beforeRouteLeave (to, from, next) {
  // 離開當前路由頁面時調用
}

三、路由獨享守衛(wèi)

路由獨享守衛(wèi)是在路由配置頁面單獨給路由配置的一個守衛(wèi)

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

vue-router提供了導航鉤子:全局前置導航鉤子 beforeEach和全局后置導航鉤子 afterEach，他們會在路由即將改變前和改變后進行觸發(fā)。所以判斷用戶是否登錄需要在beforeEach導航鉤子中進行判斷。

導航鉤子有3個參數(shù)：

  1、to:即將要進入的目標路由對象；

  2、from:當前導航即將要離開的路由對象；

  3、next ：調用該方法后，才能進入下一個鉤子函數(shù)（afterEach）。

        next()//直接進to 所指路由
        next(false) //中斷當前路由
        next('route') //跳轉指定路由
        next('error') //跳轉錯誤路由

beforeEach：

路由配置文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
   {
   path: '/home',
   name: 'home',
   component: HomePage
  },
   {
    path:'*',
    redirect:'/home'
   }
 ],
})
 router.beforeEach((to,from,next)=>{
  console.log(to);
  console.log(from);
  next();
 })
 export default router;

打印結果如下：

 實現(xiàn)用戶驗證的代碼：

router.beforeEach((to, from, next) => {
  //我在這里模仿了一個獲取用戶信息的方法
 let isLogin = window.sessionStorage.getItem('userInfo');
  if (isLogin) {
    //如果用戶信息存在則往下執(zhí)行。
    next()
  } else {
    //如果用戶token不存在則跳轉到login頁面
    if (to.path === '/login') {
      next()
    } else {
      next('/login')
    }
  } 
})

afterEach:

和beforeEach不同的是afterEach不接收第三個參數(shù) next 函數(shù)，也不會改變導航本身，一般beforeEach用的最多，afterEach用的少.

router.afterEach((to,from)=>{ //這里不接收next
  console.log(to);
  console.log(from);
})

到此這篇關于vue 路由守衛(wèi)(導航守衛(wèi))及其具體使用的文章就介紹到這了,更多相關vue 路由守衛(wèi)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論