今天來談?wù)剉ue項目{vue,vue-router,component}三大神將之一的vue-router。作為我們前后端分離很重要的實踐之一，router幫我們完成了SPA應(yīng)用間的頁面跳轉(zhuǎn)。

并且，配合axios這樣的第三方庫，我們可以實現(xiàn)配合后臺接口的攔截器功能。

對于一個小型項目而言,router這個文件夾里面就包含了一個router.js就足夠了，

但是，當(dāng)我們的頁面比較多的時候，我們就需要分出兩個文件出來：一個定義我們的路由和組件，另一個實例化組件，并將路由掛載到vue的實例上。

基本的用法就不多贅述，大家可以看vue-router的官網(wǎng)，認真過一遍的話，基本使用肯定沒什么問題。

1.為什么我的路由不起作用?

這里有個非常重要的一點就是當(dāng)我們?nèi)?gòu)造VueRouter的實例的時候，傳入的參數(shù)的問題。

import routes from '@/router/router'const router = new VueRouter({ routes // （ES6語法）相當(dāng)于 routes: routes})new Vue({ router}).$mount('#app')

如果你這里引入的不是routes，你就要按照下面的方式來寫。

import vRoutes from '@/router/router'const router = new VueRouter({ routes :vRoutes })new Vue({ router}).$mount('#app') 

2.在路由中基于webpack實現(xiàn)組件的懶加載

對于我們的vue項目，我們基本都是運用webpack打包的，如果沒有懶加載，打包后的文件將會異常的大，造成首頁白屏，延時嚴重，不利于用戶體驗，而運用懶加載則可以將頁面進行劃分，webpack將不同組件打包成很多個小的js文件。需要的時候再異步加載，優(yōu)化用戶的體驗，換而言之，有的頁面可能100個用戶只有一兩個會進去，何必把流量花在它身上。

import App from '@/App.vue'const index = r => require.ensure([], () => r(require('@/pages/index/index')), 'index')export default [{ path: '/', component: App, children: [  {    path: '/index',    name:'index',    component: index  }]}]

 如果某個組件包含了嵌套路由，我們也可以將兩個路由打包到一個js chunk中。

// 這兩條路由被打包在相同的塊中，訪問任一路由都會延遲加載該路由組件const orderUser= r => require.ensure([], () => r(require('@/pages/order/user')), 'order')const payRecord= r => require.ensure([], () => r(require('@/pages/order/payRecord')), 'order')

3.router的模式

對于瀏覽器，我們的router分為兩種模式。

1.hash模式（默認）

按照一個uri的基本結(jié)構(gòu)來說，hash模式就是在一個基本的URI的片段進行的處理。如果拋開SPA的話，比較常見的應(yīng)用場景就是我們在做pc商城的時候，會有比如說：商品詳情，評論，商品參數(shù)這樣的tab切換，就可以使用a標簽配合id使用，加上一點運動的特效，效果甚佳。

這也是router默認使用的路由方式。不過，這種方式有一個弊端，就是在接入第三方的支付的時候，我們傳入一個url給到第三方支付作為回調(diào)地址，但是在支付完成以后，有的第三方支付會把我們的#作為一個截取符號，僅保留第一個#符號前面的url內(nèi)容，后面再添加相應(yīng)的回調(diào)參數(shù)。導(dǎo)致支付完成以后無法跳轉(zhuǎn)到相應(yīng)的支付頁面

傳入的url:

http://xx.xx.com/#/pay/123

回調(diào)后的地址:

http://xx.xx.com/pay/123?data=xxxxx%xxxx 

2.history模式

還有一種就是history的模式。它是使用h5的history.pushState來完成URL的跳轉(zhuǎn)的。使用這種方式來處理跳轉(zhuǎn)的好處就是，url和我們平常看到的沒有什么區(qū)別。和hash模式作比較的話就是沒有了#。不過使用history模式，我們在后臺也要去做相應(yīng)的處理，因為如果直接去訪問一個地址，例如http://www.xxxx.com/user/id的時候，如果后端沒有配置的時候，后端就會返回404頁面。

4.router-link在循環(huán)中this.參數(shù)名=undefined

<router-link>組件是我們在view層中需要用到的跳轉(zhuǎn)組件。它替代了<a>標簽需要做的事情，并且?guī)椭覀冏隽烁嗟氖虑椤?/p>

無論是 h5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當(dāng)你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須任何變動。

在 HTML5 history 模式下，router-link 會守衛(wèi)點擊事件，讓瀏覽器不再重新加載頁面。

當(dāng)你在 HTML5 history 模式下使用 base 選項之后，所有的 to 屬性都不需要寫（基路徑）了。

不過當(dāng)我們在v-for的循環(huán)中使用了router-link的時候，一般來說，我們需要取的都是循環(huán)里的值，通過定義的item.xxx就可以取到。如果說需要取一個我們在data中定義的值的時候，我們是通過this.foo來取呢？還是通過foo來取呢？還是都可以？

這里的話，我們是不能通過this.foo來取的，因為這里的this,不再是指向vue的實例了，而是指向了[object Window]。所以用this.foo來取的話，其實是undefined.

 <router-link tag="li" :to="{path:`/user/${item.userID}`}" v-for="(item, index) in userList" :key="index">   //含有固定的值  <p>{{this.foo}}</p>  <p>{{foo}}</p> </router-link>data(){  return {    foo:'bar',  } }

 4.vue-router配合axios的使用

 初次接觸攔截器這個概念是在java中，通過攔截器，我們可以對用戶的登錄狀態(tài)進行更加粒度的操作。而對于一個SPA的應(yīng)用來說，沒有了后臺路由的介入，我們就需要在前端實現(xiàn)一套自己的登錄狀態(tài)的管理機制。

最直觀的一點就是，通過用戶的token來判斷用戶是否登錄？

router.beforeEach((to, from, next) => { const NOW = new Date().getTime(); if (to.matched.some(r => r.meta.requireAuth)) {  if(NOW > store.state.deadLine){   store.commit('CLEAR_USERTOKEN')  }  if (store.state.message.login === true) {   next();  }  else {   next({    path: '/login',    query: {redirect: to.fullPath}   })  } } else {  next(); }})

上面的代碼中，我們通過vue-router中的全局守衛(wèi)，在導(dǎo)航觸發(fā)的時候大致做了如下幾件事：

（1）判斷導(dǎo)航的頁面是否需要登錄

（2）超過登錄持久期限，清除持久化的登錄用戶token

（3）沒有超過登錄期限，判斷是否登錄狀態(tài)

（4）沒登錄，重定向到登錄頁面

但是，僅僅這樣是不夠的。因為用戶直接不正常注銷而直接后臺運行網(wǎng)頁是很正常的事情，這就導(dǎo)致雖然token是存在的，但是對于后臺而言，這個token是無效的，過期的了。所以，我們需要axios配合后臺給出的狀態(tài)碼來完善我們的攔截器。

import router from '@/router/routes'axios.interceptors.response.use( success => {  switch (success .code) {   case -100:    router.replace({     path: 'login',     query: {redirect: router.currentRoute.fullPath}    })    console.warn('注意,登錄已過期!')    break;  }  return success; }, error => {   switch (error.code) {    case 404:     console.warn('請求地址有誤或者參數(shù)錯誤!')    break;   }  return Promise.reject(error.response.data) });

 通過后端給到的登錄過期狀態(tài)碼，這里以-100為例，我們可以用axios的響應(yīng)攔截器實現(xiàn)，當(dāng)我們的token過期的時候，我們將頁面重定向到登錄頁面去。

 5.巧用replace替換push

在項目中，我有的同事就是一直this.$router.push(...)，從開始push到結(jié)尾。

碰到有的頁面，比如說，在選擇地址的時候需要知道用戶當(dāng)前所在的城市，如果沒有的話，就是重定向到城市列表頁面去手動選取。選擇完成以后再回到選擇地址的頁面，如果一直使用push的話，點擊選擇地址的后退時，就會回退到城市列表頁。然后造成頁面間的死循環(huán)。

這里如果使用replace來操作就沒有什么問題了，問題就是我們不應(yīng)該讓城市列表頁出現(xiàn)在我們的瀏覽歷史里面。

總結(jié)

以上所述是小編給大家介紹的vue-router項目實戰(zhàn)總結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！