Vue admin template 动态路由配置

本文将详细介绍,如何使用 Vue admin template 配置动态路由。

登陆配置部分不过多介绍,可参考 https://www.fdevops.com/2020/09/09/vue-django-5171

配置路由参数

路由参数存入 Vuex 内。

src/store/modules/user.js

getter 内添加数据。

src/store/getters.js

需注意,既然使用了动态路由,则需要将 router.js 中的非必要的路由删除。

组件导入配置

通过配置全局路由变量,在数据渲染的时候,使用全局变量进行渲染路由参数。

配置生产和开发两种模式的组件引入方式。进行组件的引入。

创建两个引入组件文件,分别是 _import_development.js 和 _import_production.js。

src/router/_import_development.js

src/router/_import_production.js

配置权限文件。

src/permission.js

最后修改菜单渲染的文件。

src/layout/components/Sidebar/index.vue

Vue admin template 动态路由配置

到这里我们通过模拟路由数据的方式,来实现了我们的动态路由,但是呢,我们经常会遗忘掉一个问题,就是创建我们路由对应的组件文件,因为如果你不去创建路由对应的组件文件的话,则路由是错误的。甚至无法登陆成功。因此,一定!一定!一定要创建路由对应的组件文件。

后端数据渲染路由表

上面的配置都完善了后,然后我们配置的模拟路由测试也没问题了。我们就基于上面的配置,改造成获取后端路由数据,来动态渲染路由表的效果了。

需注意,如果要配置后端数据渲染路由表的话,那么则需要将上面模拟路由数据删除。

在 src/store/modules/user.js 内添加 actions 如下:

后端接口代码如下:

本文为原创文章,未经授权禁止转载本站文章。
原文出处:兰玉磊的个人博客
原文链接:https://www.fdevops.com/2021/05/29/vue-30806
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注