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

最新推荐文章于 2023-05-23 11:02:55 发布
原创 最新推荐文章于 2023-05-23 11:02:55 发布 · 556 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui

这篇开发札记介绍了如何在vue-element-template中实现前端自定义路由权限，并动态刷新侧边栏。步骤包括从vue-element-admin获取permission.js，修改user.js、getters.js、index.js、Sidebar组件、permission.js和router文件，解决动态路由刷新导致的404问题。

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元/天 解锁文章
vue-element-admin 实现动态路由(从后台查询出菜单列表绑定侧边栏)
蔡定努
04-28 1万+
1. 在路由实例中保留基础路由 router/index.js中只需要保留基础路由，其他的都删了 2. 获取用户菜单，并保存到Vuex中 stroe/modules/user.js中，有个getInfo方法查询用户基本信息，返回了用户的菜单列表 import { login, logout, getInfo } from '@/api/user' import { getToken,...
vue + element-ui实现按钮和权限管理动态路由
01-18
vue+element实现的后台管理权限，拿来即用！
vue 根据用户权限，加载不同的路由，生成多级侧边栏
qq_43294027的博客
07-01 3276
第一次做根据不同权限，生成不同的路由，同时生成不同侧边栏，看了好多文章写的侧边栏只能嵌套两层，自己稍微改进了一下，可以无限嵌套。第一次写文章，写的不好，多提提意见啊！有些人会问：为什么要生成不同路由，直接路由根据权限在侧边栏进行显示隐藏不就好了吗？ 我的理解，在侧边栏显示隐藏的话就是把所有的路由注册了，虽然侧边栏没有了，但是用户还是可以通过直接在地址栏输入地址进行跳转，动态生成路由，只有有权限角色才可以访问，在地址栏输入无权查看的页面是无法跳转的，因为路由没有进行添加到第一种是后端直接返回路由表，这种后续有
通过vue刷新左侧菜单栏
qq_37104276的博客
11-07 4475
今天完成了手头任务就想着做点什么，刚好领导让我看看项目左侧菜单栏不刷新的问题，我也是刚刚接触vue，很多东西都还不是很熟练，这也是我的第一篇自己写的博客，感觉还是很兴奋的，我觉得写博客这个习惯要一直养成，不但总结了自己一天的工作所得，而且也是对自己的一种良好习惯的养成。下面进入正题。 这个是我们html里面的超链接，而我们的点击事件的跳转就是通过这个超链接实现的。 然后我们要创建一
vue-element-template前端自定义路由权限动态刷新侧边栏
qq_36401083的博客
06-16 1876
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 2191
注：项目使用的是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 开发札记 之 移除mock与对接后端接口
Main_1125的博客
10-28 1830
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后台生成动态路由及菜单
每天都要努力学习哦~~
03-16 3756
例如：json里面component : ‘/layout’ 定义路由 component:()=>import(‘@’+component) 是无法生成的 必须写为 import(‘@/layout’) 才能找到模块 建议动手尝试一下。并且把里面 component: () => import(‘@/views/dashboard/index’), 内容改为 component: (‘dashboard/index’), 凡是有import的都改一下，修改后代码 以及我自己新加的代码。
vue-element-admin 和 vue-admin-template及新版本vue-element-admin调用后端接口和跨域
xxh_1229的博客
01-20 5654
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_43140505的博客
03-16 1459
目录构造不同角色的登录用户实现动态路由 要想实现动态路由，我觉得首先要了解登录，网上搜索vue element admin 登录原理会有很多，先搜索资料简单了解一下 构造不同角色的登录用户 /mork/user.js 这里模拟后端 用户详情的数据 这里定义的rule 后续动态路由 meta中的role就是这个 src/utils/validate.js 这里定义有效的登录的名字 实现动态路由 对于动态路由整体的介绍可以参考这个博客，我只是记录一下实现过程 https://juejin.cn/p
前后端分离使用VUE-element-template动态加载路由
weixin_42250577的博客
07-29 1492
前后端分离动态加载菜单 当用户登录之后获取用户信息的时候，将获取到的路由信息存储到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框架，动态添加路由进行菜单渲染的实现（手把手教程）
qq_36873710的博客
04-26 4992
vue-admin-template 动态路由实现，前端只留login、404、首页等固定路由，后端返回权限动态路由信息，前端处理。
vue-element-template学习
koogo的博客
04-22 3263
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
vue 侧边栏 和按钮权限
xfWgaoqiang的博客
10-14 1014
1. 侧边栏权限问题 先将全部侧边栏结构数据在 data 中声明 将从vux中获取回来的侧边数据和data中定义好的侧边栏数据进行比对 就完成了侧边栏的权限 2. 按钮的权限 在 main.js 中声明方法 在页面按钮上 v-if 调用就可以实现按钮的权限问题 页面上使用挂载到vue上的方法 将按钮的权限传入方法 方法会返回true 或false 实现显示隐藏 ...
vue-element-admin点击侧边栏刷新当前页面
哆啦A梦的百宝袋的博客
05-23 1809
在用 spa(单页面应用) 这种开发模式之前，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了，用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化。
vue-element-template项目学习笔记
songjuntao8的专栏
01-02 517
vue-element-template项目学习笔记
vue-element-template 根据权限动态加载路由
lcl_key的博客
08-06 5503
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 1799
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 679
vue+element实现动态路由 说明：element导航在点击的时候虽然有文字高亮，但是我们直接在域名那跳转路径，文字高亮却还是停留在上级路由，这时就需要动态路由来监听 需要配置 AA 、BB 的路由 <template> <div> <el-row> <el-col :span="12"> <el-menu :default-active="$route.path" class="el-m
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值