大数据毕业设计之前端06：Vue菜单路由动态加载是如何实现的

首先，在BuildAdmin中讲的路由，指的就是vue-router。

vue-router在BuildAdmin中主要实现了菜单栏和tabs标签页两大模块，而这两个模块是比较复杂的，所以对vue-router需要有一个很好的掌握。

此系列文章是面向BuildAdmin的，所以就从项目角度触发，来学习什么是路由、如何用路由。

路由器大家都听过吧，你电脑、手机都连这路由器和别人聊天。对面给你发了一条消息，先到路由器，路由器然后再转发给你的电脑或者手机上。那么到底是发到电脑还是手机上，路由器是通过IP决定发送到手机和电脑上。（可能说的不够专业）

在前端中，url中的路径就相当于上面的IP，一个个vue页面就相当于手机、电脑，前端页面根据路径（IP）就能找到对应的页面（手机、电脑）进行渲染。

上面是vue-router官网给出的最基本的用法，router-link就相当于<a>，to指向的就是url路径path。然后在js中定义path与页面的对应关系，可以看到about对应的是About页面，/对应的是Home页面。

router-view就会根据触发的router-link，来决定是将Home还是About页面加载渲染。

可以看到，url中的路径随着页面而变化。

首先了解一下路由有哪些功能，其次，再去再去使用路由？

我们使用比较多的就是动态路由、路由模式和导航。
接着明确项目需要一个什么样的路由，是静态路由还是动态路由。

上面官网给出的样例，就是静态路由的写法。静态路由扩展性差，将路由规则写在vue组件中，想要增加/删除只能修改代码、然后重新发布。

而动态路由是从后台API请求，然后通过调用vue-router的api（例如addRoute)，动态解析渲染到routes属性中，BuildAdmin中的侧边栏menu，就是通过动态路由实现的。这样新增/删除只需要将路由信息，存到数据库即可。

在BuildAdmin中，路由没有写在某一个vue组件中，而是将其独立成一个router模块。一些静态路由定义在了@/router/static.ts中，例如首页、404页面这些路由信息。

然后调用createRouter来创建一个全局路由对象router，将路由信息（staticRoutes）绑定在router上。

侧边栏的菜单就是动态路由渲染。从后台请求路由信息，以json格式返回给前端代码，实现动态加载，从控制台可以看到请求数据。

如果我需要新增一个Vue页面，只需要把这个vue文件放到项目的目录中，然后在数据库中新增一条路由信息。

在BuildAdmin中，处理动态路由的代码还是挺多的，主要封装在@/util/router.js中，一共399行代码。我根据自己的需求，重构、重写了方法，然后与BuildAdmin的代码学习印证。

动态加载路由，主要是使用router的 addRoute() 方法，添加一条新的路由记录到router对象的routes属性中。

BuildAmin中的路由信息是通过axios请求api从后台获取的。因为我还没有写到后台，所以这里就把json直接拿过来，定义了一个变量来模拟获取。

为了更好理解下面的操作，我将json贴出来。

export const routesList = {
   
   
    code: 1,
    time: 1685431878,
    menus: [{
   
   
        "id": 1,
        "pid": 0,
        "type":