在这篇文章中，我们将深入探讨动态路由表的实现和动态路由表的实现过程的相关内容，包括它们的定义、特点、优缺点等等。希望能对您有所启发和帮助。

本文内容目录一览：

• 1、什么是静态（static）路由表和动态（Dynamic）路由表？
• 2、怎么实现动态路由
• 3、vue-动态路由的实现
• 4、什么是静态路由&动态路由，各自的特点是什么
• 5、vue项目 动态路由怎么做
• 6、Vue实现动态路由

什么是静态（static）路由表和动态（Dynamic）路由表？

静态路由是由管理员在路由器中手动配置的固定路由，路由明确地指定了包到达目的地必须经过的路径，除非网络管理员干预，否则静态路由不会发生变化。静态路由不能对网络的改变作出反应，所以一般说静态路由用于网络规模不大、拓扑结构相对固定的网络。\x0d\x0a静态路由特点\x0d\x0a1、它允许对路由的行为进行精确的控制；\x0d\x0a2、减少了网络流量；\x0d\x0a3、是单向的；\x0d\x0a4、配置简单。\x0d\x0a\x0d\x0a动态路由是网络中的路由器之间相互通信，传递路由信息，利用收到的路由信息更新路由器表的过程。是基于某种路由协议来实现的。常见的路由协议类型有：距离向量路由协议（如RIP）和链路状态路由协议（如OSPF）。路由协议定义了路由器在与其它路由器通信时的一些规则。动态路由协议一般都有路由算法。其路由选择算法的必要步骤: \x0d\x0a1、向其它路由器传递路由信息； \x0d\x0a2、接收其它路由器的路由信息；\x0d\x0a3、根据收到的路由信息计算出到每个目的网络的最优路径，并由此生成路由选择表；\x0d\x0a4、根据网络拓扑的变化及时的做出反应，调整路由生成新的路由选择表，同时把拓扑变化以路由信息的形式向其它路由器宣告。\x0d\x0a动态路由适用于网络规模大、拓扑复杂的网络。\x0d\x0a\x0d\x0a动态路由特点：\x0d\x0a1、无需管理员手工维护，减轻了管理员的工作负担。\x0d\x0a2、占用了网络带宽。\x0d\x0a3、在路由器上运行路由协议，使路由器可以自动根据网络拓朴结构的变化调整路由条目；

怎么实现动态路由

对于相似规则的uri，可以通过参数的形式，在一个action中捕捉然后分流，不一定通过路由的机制实现。比如 koa-router，中的参数的使用。

动态加载路由可能会额外的暴露一些私有的方法，这点在实现动态路由时候要注意。

路由文件的配置虽然看似罗嗦，但却在规则中很好的描述了网站或者服务的功能入口，便于项目的维护。

vue-动态路由的实现

能够传递参数的路由即为动态路由

应用场景 ： 从列表页跳转到详情页

实现步骤：

一. 先创建动态路由组件 detail.vue (一级路由组件)

二、路由配置 （router/index.js）

import detail from '@/views/detail.vue'

ath: '/detail/:id' 等价于 'detail/2' --2即是传递的id

id属性名要和detail中接收参数名一致

什么是静态路由&动态路由，各自的特点是什么

静态路由（英语：Static routing）是一种路由的方式，路由项（routing entry）由手动配置，而非动态决定。与动态路由不同，静态路由是固定的，不会改变，即使网络状况已经改变或是重新被组态。一般来说，静态路由是由网络管理员逐项加入路由表。

动态路由是指路由器能够自动地建立自己的路由表，并且能够根据实际情况的变化适时地进行调整。

静态路由的主要特点

1)手动配置

需要管理员根据实际需要进行手动配置，路由器不会自动生成，在静态路由中，包括目标节点或目标网络的IP地址，还可以包括下一条IP地址。

2)路由路径相对固定

因为静态路由是手动配置的，所以每个静态路由在本地路由器上的路径基本是不变的，除非由管理员自己修改。

3)永久存在

一旦管理员手动创建静态路由后，会永久在路由表中，除非管理员自己删除或者静态路由中指定的出接口关闭，或下一条IP地址不可达。

4)不可通告性

静态路由信息在默认情况下是私有的，不会通告给其他路由器，也就是当在一个路由器上配置了某条静态路由时，它不会被通告到网络中相连的其它路由器上。

动态路由的主要特点

1)自适应网络状态的变化

动态路由是网络中的路由器之间相互通信，传递路由信息，利用收到的路由信息更新路由器表的过程。是基于某种路由协议来实现的。

2)自动维护路由信息

路由器能够自动建立自己的路由表，且能够根据实际情况的变化，适时地进行调整。

vue项目 动态路由怎么做

vue项目实现 动态路由 的方式大体可分为两种:

前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

详情可参阅 花裤衩大佬 的项目 手把手...

后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，我们搞了第二种方法。

大体步骤：拦截路由-后台取到路由-保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

菜单名字menName；

菜单路径menPath；

菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)

前端登录后通过接口请求拿到菜单数据后，

menName --- name

menPath --- path

menuUrl ----components文件

转换时,用到这个方法找组件资源 把 menuUrl 可以变为components的格式，转为组件文件

生成路由表

可以再过滤一遍生成的路由表

下面这个方法找到views底下所有的组件资源

路由表里路由的组件在所有组件资源里没找到时，将该路由的path变为/404

getRouter.push({ path: '*', redirect: '/404', hidden: true });

router.addRoutes(getRouter); //动态添加路由

前置工作：配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;

因为可能会有多级菜单，所以会出现children下边嵌套children的情况;

路由是数组格式

实际前端需要的 component是 component: () = import('@/views/content/classify'),

因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成组件对象

因为后台传回的是字符串，所以要把加载组件的过程 封装成一个方法，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件

Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈

beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，

ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤

global.antRouter是为了传递数据给左侧菜单组件进行渲染

上边第三步会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜单那边拿到路由，进行渲染

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种 ：

(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用

到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由

后端返回的路由格式：

注意： vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。关于vue页面刷新保存页面状态，可以查看 vue如何在页面刷新时保留状态信息

我们鼓励您尝试这些技巧，并发现它们如何帮助您更好地管理和优化您的网络连接。