這篇文章將為大家詳細(xì)講解有關(guān)vue如何使用router.beforeEach來處理跳轉(zhuǎn)前邏輯，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為金牛企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)，金牛網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

使用 router.beforeEach 來處理跳轉(zhuǎn)前邏輯

在某些情況下，我們需要在路由跳轉(zhuǎn)前處理一些特定的業(yè)務(wù)邏輯，比如修改路由跳轉(zhuǎn)、設(shè)置 title 等，代碼如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 首頁(yè)
const Home = (resolve => {
 require.ensure(['../views/home.vue'], () => {
  resolve(require('../views/home.vue'))
 })
})

let base = `${process.env.BASE_URL}`;

let router = new Router({
 mode: 'history',
 base: base,
 routes: [
  {
   path: '/',
   name: 'home',
   component: Home,
   meta: { title: '首頁(yè)' }
  },
 ]
})

router.beforeEach((to, from, next) => {
 let title = to.meta && to.meta.title;
 
 if (title) {
  document.title = title; // 設(shè)置頁(yè)面 title
 }
 
 if (to.name === 'home') {
 
  // 攔截并跳轉(zhuǎn)至 page2 單頁(yè)，$openRouter 方法在第 5 節(jié)中封裝
  Vue.$openRouter({
   name: 'page2'
  });
 }
 
 next();
})

export default router

注意最后需要調(diào)用 next() 方法執(zhí)行路由跳轉(zhuǎn)。

關(guān)于“vue如何使用router.beforeEach來處理跳轉(zhuǎn)前邏輯”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。