动态添加路由

现在我们所写的几个都是固定路由，每个用户都可以通过这些路由访问到我们的每个页面，但是在一些管理系统中，由于权限限制，每个用户只能访问到部分页面。
这时候动态添加路由的功能就派上用场了。
在应用开始时，配置很少的路由，用户登录以后，获取到了用户的权限，然后根据用户的权限去动态增加他能访问的路由。下面我们就来看看怎么动态增加路由。
我们先新建一个页面，叫做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())

会输出：

好了，这节课就到这里，动态添加路由在开发后台管理系统中一定会用到的，小伙伴们一定要记住有这么一个功能。