<td id="aqqih"></td>

<dd id="aqqih"></dd>
  1. <span id="aqqih"></span>
  2. <ol id="aqqih"></ol>

    vue路由守衛及路由守衛無限循環問題怎么解決

    這篇“vue路由守衛及路由守衛無限循環問題怎么解決”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“vue路由守衛及路由守衛無限循環問題怎么解決”文章吧。

    先貼一波官方文檔的內容

    const?router?=?new?VueRouter({?...?})
    router.beforeEach((to,?from,?next)?=>?{
    ?//?...
    })

    當一個導航觸發時,全局前置守衛按照創建順序調用。守衛是異步解析執行,此時導航在所有守衛 resolve 完之前一直處于?等待中。

    每個守衛方法接收三個參數:

    • to: Route: 即將要進入的目標?路由對象

    • from: Route: 當前導航正要離開的路由

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

      • next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是?confirmed?(確認的)。

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

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

      • next(error): (2.4.0+) 如果傳入?next?的參數是一個?Error?實例,則導航會被終止且該錯誤會被傳遞給?router.onError()?注冊過的回調。確保要調用?next?方法,否則鉤子就不會被 resolved

    然后這是我自己的總結

    import?Vue?from?'vue'
    import?Router?from?'vue-router'
    import?Login?from?'@/pages/login/Login'
    import?Index?from?'../pages/index/Index'
    import?Library?from?'../pages/library/Library'
    import?Design?from?'../pages/design/Design'
    import?Administration?from?'../pages/administration/Administration'
    import?Production?from?'../pages/production/Production'
    import?Global?from?'../common/global/Global'
    Vue.use(Router)
    const?router?=?new?Router({
    ?routes:?[
    ?{
    ??path:?'/',
    ??name:?'login',
    ??component:?Login
    ?},?{
    ??path:?'/index',
    ??name:?'index',
    ??component:?Index
    ?},?{
    ??path:?'/library',
    ??name:?'library',
    ??component:?Library
    ?},?{
    ??path:?'/design',
    ??name:?'design',
    ??component:?Design
    ?},?{
    ??path:?'/administration',
    ??name:?'administration',
    ??component:?Administration
    ?},?{
    ??path:?'/production',
    ??name:?'production',
    ??component:?Production
    ?}
    ?]
    })
    router.beforeEach?((to,from,next)?=>?{
    ?//將所有需要登陸才顯示的頁面的路由都放進一個數組
    ?const?nextRoute?=?['index',?'library',?'design',?'administration',?'production'];
    ?//獲取登陸狀態
    ?let?isLogin?=?Global.isLogin
    ?
    ?if(to.name?===?'login')?{?//如果是登錄頁,則跳過驗證
    ?next()?//必不可少
    ?return?//以下的代碼不執行
    ?}
    ?if(nextRoute.indexOf(to.name)?>=?0)?{?//判斷該頁面是否需要登陸
    ?if(!isLogin)?{?//判斷登陸狀態
    ??next({?name?:?'login'})?//如果未登錄,則跳轉到登錄頁
    ?}?else?{
    ??next()?//如果已經登陸,那就可以跳轉
    ?}
    ?}?else?{?//其他的無需登陸的頁面不做驗證
    ??next()
    ?}
    ?
    })
    export?default?router

    這樣就實現了全局路由守衛

    關于路由守衛無限循環問題

    如果你的代碼是這樣

    ?if(isLogin)?{
    ?next()
    ?}?else?{
    ?next({?name:?'login')}
    ?}

    這樣的話就會陷入無限循環

    因為你的?? next({ name: 'login')} 是相當于一個路由跳轉,它會再次觸發全局路由守衛,你又進入了全局路由守衛進行再次判斷,如此循環。

    所以,想要結束路由守衛,整段代碼的邏輯必須由 next() 進行結尾。比如像我上面寫的,當需要進入登錄頁的時候,

    ?if(to.name?===?'login')?{?
    ?next()?
    ?return?
    ?}

    加上這個判斷,當你進入登錄頁的時候也會調用next() , 路由守衛進入確認狀態,路由才會進行跳轉。

    vue是什么

    Vue是一套用于構建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區別是,使用Vue可以自底向上逐層應用,其核心庫只關注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

    以上就是關于“vue路由守衛及路由守衛無限循環問題怎么解決”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注蝸牛博客行業資訊頻道。

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    評論

    日本韩欧美一级A片在线观看
    <td id="aqqih"></td>

    <dd id="aqqih"></dd>
    1. <span id="aqqih"></span>
    2. <ol id="aqqih"></ol>