vuerouter动态路由

本篇文章给大家谈谈vue动态路由系统活动图，以及vuerouter动态路由对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、Vue实现动态路由

2、前端权限控制-基于vue-router的动态路由实现

3、vue项目 动态路由怎么做

4、Vue-Router（五）：动态路由（1）

5、vue入门(四)动态导入路由Router

6、Vue实战篇｜使用路由管理用户权限（动态路由）

Vue实现动态路由

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

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

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

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

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

后端返回的路由格式：

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

前端权限控制-基于vue-router的动态路由实现

在中后台应用系统开发中，大部分情况下会涉及到用户权限控制，除了后端做权限验证外，前端在用户访问时也需要基于用户权限做相应控制。针对前端使用vue框架的情况，对页面一级的权限控制，常规处理是在页面导航栏通过控制导航显隐控制权限，但在浏览器地址栏输入访问路径依然可以访问，可以用vue-router的动态路由来实现权限控制。

登录成功后通过addRoutes更新路由配置

正常情况下这样就可以实现动态路由控制了，但刷新页面发现会出现404，因为刷新时vue实例重新初始化了，导致动态路由被还原成默认路由，此时需要将权限码存储在本地，在main.js中根据权限码重新生成动态路由

以上步骤基本可以实现动态添加路由并在刷新页面是维持路由状态，但访问根路径会始终跳转到登录页，无法默认跳转到首页，这个问题目前还未想到好的解决方案。

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-Router（五）：动态路由（1）

一般路由是在 router/index.js 里面设置的，这样我们有了一套固定的路由。

但是有的时候我们需要在运行时可以动态设置一些路由，最常见的就是后台管理。

用户登录后，根据用户的角色、权限，加载对应的路由。这样感觉上可以安全一些，另外路由的“体积”也不用那么大。

那么我们如何来控制动态的路由呢？

我们可以在 router/index.js 里面加，也可以在main.js 里面加，也可以在其他地方加，比如登录的组件。

vue入门(四)动态导入路由Router

环境：vue3

router/index.js

结构如下图

约定模块的路由文件命名规范：*.router.js

Vue实战篇｜使用路由管理用户权限（动态路由）

权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。

跟着我一起来学vue实战篇路由管理权限吧!

getCurrentAuthority()函数用于获取当前用户权限，一般来源于后台数据

check()函数用于权限的校验匹配

isLogin()函数用于检验用户是否登录

路由配置元信息meta:{ authority: ["admin"] }

使用to.matched获取跳转路由的全部信息,包括父路由和子路由

使用lodash中的findLast匹配离跳转路由配置权限的元信息

引入auth.js中check()和isLogin()进行判断是否具有权限或是否已登录

如果没有权限则给出提示信息后跳转到403页面,未登录则返回登录页面

运行结果

当getCurrentAuthority()函数返回admin时，则菜单会显示所有元信息meta:{ authority: ["admin"] }的路由菜单；

如返回值为user时，菜单会显示所有元信息meta:{ authority: ["user"] }的路由菜单

接下来CrabFort会带大家一起实现更加精细化的权限设计（权限组件、权限指令）

vue动态路由系统活动图的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vuerouter动态路由、vue动态路由系统活动图的信息别忘了在本站进行查找喔。