序言：前不久做了一個面試，問（vue中你是怎麼做路由管理的？），因為本身對Vue有關八股文的地方，並沒仔細看，答的時候腦子老是禁不住往動態路由那塊想，哈哈。。。所以還是跑來記錄一下吧，畢竟好記性不如爛筆頭！！！（本篇純八股文。）

1、Vue中使用vue-router管理路由

Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：

• • 巢狀的路由/視圖表
  • 模組化的、基於元件的路由配置
  • 路由引數、查詢、萬用字元
  • 基於 Vue.js 過渡系統的檢視過渡效果
  • 細粒度的導航控制
  • 帶有自動啟用的 CSS class 的連結
  • HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
  • 自定義的滾動條行為

ps：摘自官方文件

1.1 安裝

（1）可以使用script標籤進行全域性安裝

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

（2）也可以使用npm的方式進行安裝，需要宣告 Vue.use(...)

//npm方式安裝
npm install vue-router


//在main.js中 匯入vue專案中
import Vue from 'vue'
import VueRouter from 'vue-router'

//通過 Vue.use() 明確地安裝路由功能
Vue.use(VueRouter)
 

1.2 建立router例項

可以用new VueRouter(options)建立並匯出一個router例項，來管理Vue專案中的路由，引數是路由的配置引數。配置引數中最重要的是routes,它是一個數組，用來設定一組url與元件的對應關係，陣列中的成員稱為一條路由。

const routes = [
  //一條路由
  {
    path: '/',
    name: 'default',
    redirect: '/login',
    component: resolve => require(['@/views/login/login.vue'], resolve),
  },
]

const vueRouter = new Router({
  mode: 'history', //設定成history模式，不帶#號
  routes
})

export default vueRouter
 

1.3 在vue例項中引入Router例項

在全域性main.js檔案中寫入Vue例項，裡面引入router例項。

//router 匯入全域性配置檔案
import router from './router'

//在全域性配置檔案內，建立Vue例項
try {
  new Vue({
    el: '#app',
    router,
    components: {
      App
    },
    template: '<App/>'
  })
} catch (e) {}

1.4、渲染路由匹配的元件

在模板中使用<router-view> 元件用來渲染通過路由對映過來的元件，通常在app.vue中使用。

2、Vue動態路由載入

適用場景：儀表盤專案中，系統根據登入賬號的許可權，動態載入左側選單，由後端直接返回的路由選單資料，以及對於某一功能模組的入口許可權的判斷，對某一模組是由擁有訪問許可權。

思路：概括一下就是將路由配置分為兩部分，一部分使用者路由（根據使用者許可權生成的路由），一部分公共路由（比如說：404，500這些報錯頁面以及login登入頁等）。

以登入場景為例：

1、首先在vue-router物件中初始化公共路由（404、login頁面）；

2、在使用者進行登陸時，呼叫登入介面拿到該使用者資訊（先不返給前端，根據資訊取出對應的menuList），後臺根據使用者資訊取得對應的許可權選單menuList；

3、前端將後臺返回的menuList轉換成我們需要的router資料結構；

4、通過vue-router2.2新添的router.addRouter(routes)方法，也可以可以將轉後的路由資訊保存於vuex，這樣我們就可以取出路由資訊並且渲染我們的左側選單，實現動態路由。

附一份簡單的程式碼吧：

ps：網上的有關動態路由載入真的超級多，此程式碼僅作理解用。。。

router.beforeEach(({ meta, path }, from, next) => {
  // to: Route: 即將要進入的目標 路由物件
  // from: Route: 當前導航正要離開的路由
  // next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。l
  let auth = meta.auth
  let isLogin = store.state.user.isLogin
  console.log(meta, isLogin);
  console.log("SSPT---->store===",store);
  if (auth && !isLogin) {
    next({
      path: '/login',
      query: { redirect: path === '/login' ? null : path }
    })
  } else {
    next()
  }

  if (path === '/login' && isLogin) {
    router.push({ path: '/index' })
  }
})

結語：

在日常開發學習中，真真的建議大家去看官方文件，學到的能全一點，細緻一點，程式設計師需要具備閱讀文件的能力，很重要的！！順便吐槽一下現在的部落格，真的都是好看的皮囊。。。有時候別人總結的還不如自己悟出來的呢（小白除外哈），當然，本博文只是為了我加深記憶做的，這麼多是不是有點矛盾啊，不管了，哈哈哈，我溜~~~