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

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

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

• 無論是 h5 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來操作就沒有什么問題了，問題就是我們不應該讓城市列表頁出現在我們的瀏覽歷史里面。