動態添加路由

現在我們所寫的幾個都是固定路由，每個用戶都可以通過這些路由訪問到我們的每個頁面，但是在一些管理系統中，由于權限限制，每個用戶只能訪問到部分頁面。
這時候動態添加路由的功能就派上用場了。
在應用開始時，配置很少的路由，用戶登錄以后，獲取到了用戶的權限，然后根據用戶的權限去動態增加他能訪問的路由。下面我們就來看看怎么動態增加路由。
我們先新建一個頁面，叫做about，關于我們：

<template>
  <div>關于我們</div>
</template>

<script>
export default {}
</script>

<style></style>

然后我們使用router的addRoute的方法來動態添加上它，修改router.js，增加以下代碼：

router.addRoute({
  path: '/about',
  name: 'about',
  component: () => import('./views/about'),
  meta: {
    title: '關于我們',
  },
})

這樣就動態增加了一個about頁面，通過http://localhost:8081/about就可以訪問到了。
在實際中肯定是要根據用戶的權限來動態添加路由的。

判斷當前是否已有某個路由

router對象有hasRoute方法，它接受一個參數，路由的名稱，來判斷在已配置的路由里有沒有這個路由，
我們知道現在首頁路由的name是index，那么以下代碼會打印true：

console.log(router.hasRoute('index'))

如果我們換成

console.log(router.hasRoute('linge'))

那么就會打印false了，因為沒有一個路由的name是linge

獲取當前所有的路由配置

只要調用router.getRoutes()，就可以獲取當前已配置的路由的數組了，我們打印一下：

console.log(router.getRoutes())

會輸出：

好了，這節課就到這里，動態添加路由在開發后臺管理系統中一定會用到的，小伙伴們一定要記住有這么一個功能。