這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)Vue中afterEach和beforeEach的區(qū)別是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計制作的公司,為廣大用戶提供了成都網(wǎng)站制作、網(wǎng)站建設(shè)，成都網(wǎng)站設(shè)計，廣告投放，成都做網(wǎng)站選創(chuàng)新互聯(lián)，貼合企業(yè)需求，高性價比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

路由寫法

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

vue-router 的路由跳轉(zhuǎn)的方法

第一種 : 編程式的導(dǎo)航

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

第二種 : 函數(shù)式的導(dǎo)航

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

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

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

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

還有一些方法

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

基本使用大概就這么多

 還有 命名視圖 路由重定向 等等需要的請看官網(wǎng)

基本知識大概就這么多

現(xiàn)在說說正題 afterEach beforeEach這兩個導(dǎo)航守衛(wèi)的區(qū)別

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

記住參數(shù)或查詢的改變并不會觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。

在全局守衛(wèi)里面

beforeEach 全局前置守衛(wèi)

當(dāng)一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。

每個守衛(wèi)方法接收三個參數(shù)：

?to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
?from: Route: 當(dāng)前導(dǎo)航正要離開的路由
?next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

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

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

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

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

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

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

然而和守衛(wèi)不同的是，這些鉤子不會接受 next 函數(shù)也不會改變導(dǎo)航本身

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

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

上述就是小編為大家分享的Vue中afterEach和beforeEach的區(qū)別是什么了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：Vue中afterEach和beforeEach的區(qū)別是什么
網(wǎng)頁地址：http://chinadenli.net/article28/gpdgjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、微信小程序、微信公眾號、企業(yè)網(wǎng)站制作、標(biāo)簽優(yōu)化、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)