承接上文Vue實戰——vueRouter路由的添加與配置，繼續我們的實戰之旅，本項目Gitee位址：
https://gitee.com/vuejslearn/news-list.git
從本項目中的導航配置檔案中，我們發現了：
{ path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }
形如上面的代碼，這是什麼意思呢？不難了解，path，就是導航的url路徑，name則為導航的名稱，component則是導航到哪個目标元件。比如項目的初始目錄是'/'，則預設導航到了Home這個元件裡，也就是項目的預設首頁。當我們通過：
Home | AboutnewAbout
中點選Home時，就會通過路由的配置，将Home元件顯示到的标記處。
可，問題是，假設我們需要在路由跳轉前對使用者身份做判斷，常見的比如身份驗證——必須在登入狀态下才能進行跳轉，那該怎麼做呢？這裡我們需要使用全局前置守衛：
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})
我們在項目中路由配置檔案裡加入：
router.beforeEach((to, from, next) => { console.log('全局前置守衛') console.log(to) console.log(from) console.log(next) debugger // 如果注釋下面的方法，則導航不會正确跳轉過去 next()})
啟動項目，打開F12
我們發現，在路由跳轉前，執行了我們這個代碼，F8放行，則正常跳到首頁。我們就可以在這裡進行必要的身份驗證了。
同樣的，有了前置，還有後置：
router.afterEach((to, from) => { console.log('全局後置鈎子') console.log(to) console.log(from) debugger})
這些配置，都是全局生效，也就是說所有的跳轉都會走這兩個方法。那有沒有隻對某個跳轉進行攔截呢？有的——路由獨享守衛：
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ]})
形如以上，我們在我們的news-list項目中，路由配置檔案的newAbout子產品加入以下代碼：
beforeEnter: (to, from, next) => { console.log('newAbout獨享的前置守衛') debugger next() },
意思就是當跳轉newAbout這個導航時，才進行前置守衛。我們重新開機項目，進行跳轉驗證，發現隻有當點選newAbout時，才走這個攔截。
到此，大家會發現，所謂的守衛，是什麼呢？就是攔截器，它和後端服務的攔截器是一種思路，在執行邏輯前、後。進行統一攔截過濾。
當然除了全局、路由，還有元件級别的攔截，接下來我們建立一個新的元件：newAbout.vue
這是一個新的元件
然後修改路由配置，将newAbout的元件改成建立的元件
component: () => import(/* webpackChunkName: "about" */ '../views/newAbout.vue')
重新開機項目，點選newAbout：
元件已經挂載上了。接下來，假設我們在跳轉到newAbout元件後，需要從背景擷取資料，那我們該怎麼做呢？修改newAbout元件：
這是一個新的元件,從背景擷取的資料={{value}}
我們添加了一個getData的方法，模拟從背景擷取資料，然後在元件created的時候調用，當我們重新開機項目後，通路：
頁面出現了，模拟的資料。這就是導航跳轉後，擷取資料的方式之一。
原創不容易，鑒于本人水準有限，文中如有錯誤之處歡迎大家指正。以後我會持續釋出vue實戰系列的文檔，喜歡的朋友歡迎關注。