序言：前不久做了一個面試，問（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 vueRouter1.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' })
}
})
結語：
在日常開發學習中，真真的建議大家去看官方文檔，學到的能全一點，細致一點，程序員需要具備閱讀文檔的能力，很重要的！！順便吐槽一下現在的博客，真的都是好看的皮囊。。。有時候別人總結的還不如自己悟出來的呢（小白除外哈），當然，本博文只是為了我加深記憶做的，這么多是不是有點矛盾啊，不管了，哈哈哈，我溜~~~