vue-router項目實戰總結篇

今天來談談vue項目{vue,vue-router,component}三大神將之一的vue-router。作為我們前后端分離很重要的實踐之一，router幫我們完成了SPA應用間的頁面跳轉。

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

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

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

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

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

這里有個非常重要的一點就是當我們去構造VueRouter的實例的時候，傳入的參數的問題。

import routes from '@/router/router'
const router = new VueRouter({
 routes // （ES6語法）相當于 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實現組件的懶加載

對于我們的vue項目，我們基本都是運用webpack打包的，如果沒有懶加載，打包后的文件將會異常的大，造成首頁白屏，延時嚴重，不利于用戶體驗，而運用懶加載則可以將頁面進行劃分，webpack將不同組件打包成很多個小的js文件。需要的時候再異步加載，優化用戶的體驗，換而言之，有的頁面可能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的基本結構來說，hash模式就是在一個基本的URI的片段進行的處理。如果拋開SPA的話，比較常見的應用場景就是我們在做pc商城的時候，會有比如說：商品詳情，評論，商品參數這樣的tab切換，就可以使用a標簽配合id使用，加上一點運動的特效，效果甚佳。

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

傳入的url:

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

回調后的地址:

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

2.history模式

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

4.router-link在循環中this.參數名=undefined

<router-link>組件是我們在view層中需要用到的跳轉組件。它替代了<a>標簽需要做的事情，并且幫助我們做了更多的事情。

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

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

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

不過當我們在v-for的循環中使用了router-link的時候，一般來說，我們需要取的都是循環里的值，通過定義的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中，通過攔截器，我們可以對用戶的登錄狀態進行更加粒度的操作。而對于一個SPA的應用來說，沒有了后臺路由的介入，我們就需要在前端實現一套自己的登錄狀態的管理機制。

最直觀的一點就是，通過用戶的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中的全局守衛，在導航觸發的時候大致做了如下幾件事：

（1）判斷導航的頁面是否需要登錄

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

（3）沒有超過登錄期限，判斷是否登錄狀態

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

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

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('請求地址有誤或者參數錯誤!')
    break;
   }
  return Promise.reject(error.response.data)
 });

 通過后端給到的登錄過期狀態碼，這里以-100為例，我們可以用axios的響應攔截器實現，當我們的token過期的時候，我們將頁面重定向到登錄頁面去。

 5.巧用replace替換push

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

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

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

總結

以上所述是小編給大家介紹的vue-router項目實戰總結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！