今天來談談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使用，加上一點運動的特效，效果甚佳。