成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

VueRouter進(jìn)階一(導(dǎo)航鉤子和路由元信息)

liukai90 / 1618人閱讀

摘要：有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子全局的單個(gè)路由獨(dú)享的或者組件級(jí)的。進(jìn)行管道中的下一個(gè)鉤子。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。通過訪問組件實(shí)例路由元信息你可以在中直接訪問。

導(dǎo)航鉤子

vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。

全局鉤子

你可以使用 router.beforeEach 注冊(cè)一個(gè)全局的 before 鉤子：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局的 before 鉤子按照創(chuàng)建順序調(diào)用。鉤子是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有鉤子 resolve 完之前一直處于 等待中。

每個(gè)鉤子方法接收三個(gè)參數(shù)：

to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

from: Route: 當(dāng)前導(dǎo)航正要離開的路由

next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。

next("/") 或者 next({ path: "/" }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved。

同樣可以注冊(cè)一個(gè)全局的 after 鉤子，不過它不像 before 鉤子那樣，after 鉤子沒有 next 方法，不能改變導(dǎo)航：

router.afterEach(route => {
  // ...
})

你可以在路由配置上直接定義 beforeEnter 鉤子：

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

這些鉤子與全局 before 鉤子的方法參數(shù)是一樣的。
組件內(nèi)的鉤子

最后，你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子：

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問組件實(shí)例 `this`
  }
}

beforeRouteEnter 鉤子 不能 訪問 this，因?yàn)殂^子在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒被創(chuàng)建。

不過，你可以通過傳一個(gè)回調(diào)給 next來訪問組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實(shí)例
  })
}
路由元信息

你可以 在 beforeRouteLeave 中直接訪問 this。這個(gè) leave 鉤子通常用來禁止用戶在還未保存修改前突然離開。可以通過 next(false) 來取消導(dǎo)航。
定義路由的時(shí)候可以配置 meta 字段：

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      children: [
        {
          path: "bar",
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何訪問這個(gè) meta 字段呢？

首先，我們稱呼 routes 配置中的每個(gè)路由對(duì)象為 路由記錄。路由記錄可以是嵌套的，因此，當(dāng)一個(gè)路由匹配成功后，他可能匹配多個(gè)路由記錄

例如，根據(jù)上面的路由配置，/foo/bar 這個(gè) URL 將會(huì)匹配父路由記錄以及子路由記錄。

一個(gè)路由匹配到的所有路由記錄會(huì)暴露為 $route 對(duì)象（還有在導(dǎo)航鉤子中的 route 對(duì)象）的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

下面例子展示在全局導(dǎo)航鉤子中檢查 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: "/login",
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91760.html

相關(guān)文章

  • VueRouter進(jìn)階（2）-路由元信息

    摘要：簡單介紹主人公字段介紹我們稱每個(gè)路由對(duì)象為路由記錄，路由記錄可以嵌套。所以到我們匹配到一個(gè)路有的時(shí)候他有可能有多條路由記錄。 路由元信息 為什么會(huì)有這個(gè)東西呢？我們知道我們?yōu)g覽一些網(wǎng)站的時(shí)候有需要驗(yàn)證登錄的也有不需要驗(yàn)證登錄的，如果所有頁面都在做成驗(yàn)證登錄的話對(duì)于用戶的體驗(yàn)也是極差的，所以這個(gè)時(shí)候路由元信息就起到了很大的作用。 簡單介紹 主人公：meta字段 介紹：我們稱每個(gè)路由對(duì)象為...

    CoXie 評(píng)論0 收藏0

  • VueRouter進(jìn)階四(滾動(dòng)行為)

    摘要：滾動(dòng)行為使用前端路由，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁面那樣。這個(gè)方法返回滾動(dòng)位置的對(duì)象信息，長這樣如果返回一個(gè)布爾假的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。 滾動(dòng)行為 使用前端路由，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁面...

    kumfo 評(píng)論0 收藏0

  • VueRouter進(jìn)階（1）-導(dǎo)航守衛(wèi)

    摘要：簡介主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。判斷必要操作是否進(jìn)行沒進(jìn)行的話中斷跳轉(zhuǎn)。進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是確認(rèn)的。中斷當(dāng)前的導(dǎo)航。如果傳入的參數(shù)是一個(gè)實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給注冊(cè)過的回調(diào)。 簡介 主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進(jìn)行沒進(jìn)行的話中斷跳轉(zhuǎn)。 分為三大類：全局守衛(wèi)...

    renweihub 評(píng)論0 收藏0

  • Vue路由

    摘要：定義路由創(chuàng)建實(shí)例，然后傳配置創(chuàng)建和掛載根實(shí)例。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子全局的單個(gè)路由獨(dú)享的或者組件級(jí)的。例如，根據(jù)上面的路由配置，這個(gè)將會(huì)匹配父路由記錄以及子路由記錄。因此，我們需要遍歷來檢查路由記錄中的字段。 Vue-router(路由) 安裝 CDN引入(非打包)： NPM安裝(打包)： npm install vue-router 開始使用 在使用V...

    church 評(píng)論0 收藏0

  • Vue-Router（vue路由）

    摘要：你可以使用注冊(cè)一個(gè)全局的鉤子鉤子函數(shù)的三個(gè)參數(shù)即將要進(jìn)入的目標(biāo)路由對(duì)象當(dāng)前導(dǎo)航正要離開的路由一定要調(diào)用該方法來這個(gè)鉤子。 Vue-router（路由） 在web開發(fā)中，router是指根據(jù)url分配到對(duì)應(yīng)的處理程序 CDN引入： //vue //vue-router NPM安裝 npm install vue-router 開始使用 在使用Vue.js的時(shí)候，我們通過組合組件來組...

    hover_lew 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<