vue-element-template 开发札记 之 前端自定义路由权限动态刷新侧边栏

最新推荐文章于 2023-05-23 11:02:55 发布
最新推荐文章于 2023-05-23 11:02:55 发布
阅读量466 收藏 3
点赞数 1
分类专栏： vue-element-template 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Main_1125/article/details/121014158
版权
这篇开发札记介绍了如何在vue-element-template中实现前端自定义路由权限，并动态刷新侧边栏。步骤包括从vue-element-admin获取permission.js，修改user.js、getters.js、index.js、Sidebar组件、permission.js和router文件，解决动态路由刷新导致的404问题。
摘要由CSDN通过智能技术生成

vue-element-template 开发札记 之 前端自定义路由权限动态刷新侧边栏

1、获取vue-element-admin的src/store/modules/permission.js

从 vue-element-admin的src/store/modules 目录下把 permission.js 文件拷贝至 vue-element-template 的 src/store/modules 目录下
访问：https://hub.fastgit.org/PanJiaChen/vue-element-admin/blob/master/src/store/modules/permission.js

github 国内访问较慢，可以访问其镜像地址：https://hub.fastgit.org/

可根据实际情况修改内容，如：
在这里插入图片描述

2、修改vue-element-template的src/store/modules/user.js

在这里插入图片描述

最低0.47元/天 解锁文章
Main.
关注
专栏目录
vue-element-template学习
koogo的博客
04-22 3127
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
vue-element-template前端自定义路由权限动态刷新侧边栏
qq_36401083的博客
06-16 1798
vue-element-template自定义路由权限动态刷新侧边栏1.情况说明：2.操作步骤：3.测试 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 1.情况说明： 本教程是在vue-element-template基础上，参考vue-element-admin进行编写说明。 官网：https://panjiachen.github.io/vue-element-admin-s
vue-element-template 动态路由
素味平生的博客
12-21 1395
注：项目使用的是vue-element-template的模板 改动文件： permission.js、store/modules/user.js、store/getters.js、router(文件夹)、layout/components/Sidebar/index.vue router.js ：在路由表中删掉除基础页面外的其他页面配置，只保留登录、404页面（我把首页也删掉了，因为我的首页也要走权限，不走权限的话就保留在静态路由里 在router文件夹下增加两个文件，...
【vue-element-template 一步步实现动态路由（目前只是前端模拟数据）】
qq_43140505的博客
03-16 1375
目录构造不同角色的登录用户实现动态路由 要想实现动态路由，我觉得首先要了解登录，网上搜索vue element admin 登录原理会有很多，先搜索资料简单了解一下 构造不同角色的登录用户 /mork/user.js 这里模拟后端 用户详情的数据 这里定义的rule 后续动态路由 meta中的role就是这个 src/utils/validate.js 这里定义有效的登录的名字 实现动态路由 对于动态路由整体的介绍可以参考这个博客，我只是记录一下实现过程 https://juejin.cn/p
前后端分离使用VUE-element-template动态加载路由
weixin_42250577的博客
07-29 1414
前后端分离动态加载菜单 当用户登录之后获取用户信息的时候，将获取到的路由信息存储到vuex中的全局数据区 在getters.js文件下定一个存储的变量 在router文件下创建两个文件 _import_development.js module.exports = file => require('@/views/' + file + '.vue').default _import_production.js module.exports = file => () => impor
vue-element-template 开发札记 之 移除mock与对接后端接口
Main_1125的博客
10-28 1690
vue-element-template 开发札记 | 移除mock与对接后端接口 本想用 vue-element-admin 的，但是 npm install 屡屡失败，干脆用它的基础版 vue-element-template 一、下载 github 镜像地址：https://hub.fastgit.org/PanJiaChen/vue-admin-template git clone 至本地：git clone https://hub.fastgit.org/PanJiaChen/vue-admi
vue-element-admin动态生成侧边栏以及添加路由
w_gold_qin的博客
03-14 3054
需求：后端根据登录的用户不同，返回具体的路由表，前端根据后端返回的数据动态生成侧边栏以及实现跳转。（与该框架返回角色且根据角色生成路由不同） 1、首先登陆，登陆成功之后拿token获取后端接口，把得到的数据放在localStorage里面 sysHome() { this.$api.xxxxx() .then(function(res) { localStorage.setItem('router', JSON.stringify(res.data))// 返回的数据存在loca
vue-element-admin 和 vue-admin-template及新版本vue-element-admin调用后端接口和跨域
xxh_1229的博客
01-20 5254
vue-element-admin 和 vue-admin-template简介及新版本vue-element-admin调用后端接口和跨域 一、vue-element-admin 1、简介 而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/ GitHub地址：https://github.com/PanJiaChen/vue-eleme
vue-element-template框架，动态添加路由进行菜单渲染的实现（手把手教程）
qq_36873710的博客
04-26 3749
vue-admin-template 动态路由实现，前端只留login、404、首页等固定路由，后端返回权限动态路由信息，前端处理。
vue + element-ui实现按钮和权限管理动态路由
01-18
vue+element实现的后台管理权限，拿来即用！
vue 侧边栏 和按钮权限
xfWgaoqiang的博客
10-14 920
1. 侧边栏权限问题 先将全部侧边栏结构数据在 data 中声明 将从vux中获取回来的侧边数据和data中定义好的侧边栏数据进行比对 就完成了侧边栏的权限 2. 按钮的权限 在 main.js 中声明方法 在页面按钮上 v-if 调用就可以实现按钮的权限问题 页面上使用挂载到vue上的方法 将按钮的权限传入方法 方法会返回true 或false 实现显示隐藏 ...
vue-element-admin点击侧边栏刷新当前页面
最新发布
哆啦A梦的百宝袋的博客
05-23 1504
在用 spa(单页面应用) 这种开发模式之前，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了，用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化。
vue-element-template项目学习笔记
songjuntao8的专栏
01-02 439
vue-element-template项目学习笔记
vue-element-template 根据权限动态加载路由
lcl_key的博客
08-06 5213
vue-element-template 根据权限动态加载路由一、前序工作二、根据权限动态加载路由1.挂载前的验证2.保存一些相关信息3.获取用户角色4.筛选路由5最后的加载6效果截图三、遇到的bug1.data functions should return an object:2.动态路由显示不成功的原因四、结尾 一、前序工作 因为我是用template来开发的；想偷个懒，所以我去admin里拿了几个页面和路由来测试 在开始之前简单说一下vue-element-admin 的路由 它的路由有两种： 一种
vue3和vue-router4配置下的element-admin-template 权限路由，根据不同身份显示不同侧边栏（导航栏）
qq_41705342的博客
01-12 1571
element-admin-template 权限路由，根据不同身份显示不同侧边栏（导航栏）前言需要修改的几个文件步骤src/permission.jssrc/store/modules/permission.jssrc/store/modules/user.jssrc/store/getters.jssrc/store/index.jssrc/router/index.jssrc/Layout/components/Sidebar/index.vue 前言 网上大多教程都是基于vue2.x的权限路由教程，
*vue+element实现动态路由*
weixin_45231907的博客
12-21 618
vue+element实现动态路由 说明：element导航在点击的时候虽然有文字高亮，但是我们直接在域名那跳转路径，文字高亮却还是停留在上级路由，这时就需要动态路由来监听 需要配置 AA 、BB 的路由 <template> <div> <el-row> <el-col :span="12"> <el-menu :default-active="$route.path" class="el-m
【vue element admin】服务端控制侧边栏显示权限详细教程
wjinxiang的专栏
04-16 5090
写在前面： 服务端语言：golang 框架：gin vue element admin版本：4.0.0 概览： 修改文件：src/permission.js、src/store/modules/permission.js、 src/router/index.js 具体修改： 1、src/router/index.js 注意：每个菜单节点都要设置n...
【个人笔记】Vue+ElementUI后台模板配置动态路由
dongzhensong的博客
03-05 3676
模板链接: https://pan.baidu.com/s/1n_ggZBTuGyn2TMevOPsaig 提取码: 3r6c 该模板为别人开发，暂时未找到作者 1.创建一个Vue组件： 2.在store/components/lazyLoading.js文件中注册组件： 注意注册的时候，填写正确组件地址 3.在components/login.vue 的登录成功结果处理中将zstest页...
Vue-Element-Template实战：构建顶部菜单与侧边栏
"vue-element-template实战案例，通过vue.js技术栈实现顶部一级菜单和左侧多级菜单功能" 在本文中，我们将深入探讨如何使用Vue.js框架和Element UI库来构建一个包含顶部一级菜单和左侧二级及以下菜单的Web应用。Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值