Vue中afterEach和beforeEach的區別有哪些

本篇內容介紹了“Vue中afterEach和beforeEach的區別有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

路由寫法

 routes: [
  {
    path: '/cart',
    name: 'cart',
    component: cart,
    meta :{ title: "購物車"}        //用于給定網頁名
  }
 ]

vue-router 的路由跳轉的方法

第一種 : 編程式的導航

<router-link to="/" tag="p">耳機頻道</router-link>
//to是一個prop.指定需要跳轉的路徑,也可以使用v-bind動態設置
//tag可以指定渲染成標簽,默認是a標簽
<router-link to="/" replace>跳轉回去</router-link>  
//這樣的寫法是不會留下歷史痕跡,回退鍵無效
<router-link :to="{ name: 'product', params: { id : 1 }}">User</router-link>
// /product/1

第二種 : 函數式的導航

//這里假設 我要跳轉product頁面并且附帶參數id 
//這里定義好了list.id 就是 動態的值
this.$router.push('./product/' + list.id)            // 字符串的方式進行描述
this.$router.push({name : 'product',params: { id : list.id }})  // 命名的路由的方式進行描述
this.$router.push({ path: `/product/${list.id}` })        // 直接定義path類似第一種
//比較常用的跳轉路由的方法
//假如是帶查詢參數
router.push({ path: 'product', query: { id: list.id }})      // /product?id=1

這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

當你點擊 <router-link> 時，這個方法會在內部調用，所以說，點擊 <router-link :to="..."> 等同于調用 router.push(...)。

值得注意的一點是,如果提供了 path，params 的配置將不會生效

還有一些方法

router.replace   //它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄
router.go(1)    //在瀏覽器記錄里面前進一步,等于history.forward()
router.go(-1)    //后退一步記錄，等同于 history.back()
router.go(n)    //瀏覽器記錄前進3步

現在說說正題 afterEach beforeEach這兩個導航守衛的區別

正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單個路由獨享的, 或者組件級的。

記住參數或查詢的改變并不會觸發進入/離開的導航守衛。

在全局守衛里面

beforeEach 全局前置守衛

當一個導航觸發時，全局前置守衛按照創建順序調用。

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

?to: Route: 即將要進入的目標 路由對象
?from: Route: 當前導航正要離開的路由
?next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

router.beforeEach((to, from, next) => {
  console.log(to);  //即將要進入的路由對象
  console.log(from); //當前導航要離開的路由對象
 
  next();       //調用該方法,才能進入下一個鉤子
})
//這樣寫就可以明顯的看出每個參數的意義

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

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

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

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

afterEach 全局后置鉤子
router.afterEach((to, from) => {
 // ...
})

然而和守衛不同的是，這些鉤子不會接受 next 函數也不會改變導航本身

從使用的角度來說 前置鉤子更加常用,比如登錄驗證 以及給Vue單頁面引用規定網頁名等等

router.beforeEach((to,from,next) => {
 if(to.meta.title) {
  document.title = to.meta.title;  //在路由里面寫入的meta里面的title字段
 }
 next();
})

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

“Vue中afterEach和beforeEach的區別有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！