03---vue+element+admin将本地路由修改为权限路由

已于 2023-05-24 15:04:40 修改
阅读量1.2k 收藏 1
点赞数
文章标签： vue.js javascript 前端
于 2022-03-14 17:09:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47838176/article/details/123482015
版权

1.修改退出登录的处理函数

找到退出登录的处理函数，在src/store/user.js中的logout函数

修改的代码已经在第一篇博客01---vue+element+admin将本地路由修改为动态路由_天尘不打野的博客-CSDN博客

 的src/store/modules/user.js文件中了，这里就不贴代码了

2.在src/layout/components/Navbar.vue文件中添加模块页面的跳转按钮

 3.修改src/views/login/index.vue文件中登录的跳转地址

注：因为内容太多，前面的内容在我另外的几个博客里：

01---vue+element+admin将本地路由修改为动态路由_天尘不打野的博客-CSDN博客

02---vue+element+admin将本地路由修改为动态路由_天尘不打野的博客-CSDN博客

到这里动态路由基本就实现了，以下是修改完成后的项目模板下载链接和效果图 ：

下载链接

vue+element+admin后台管理项目模板-Javascript文档类资源-CSDN下载

点击登录，进入模块页面

点击组件系统模块，加载对应路由 

 点击我的应用，退回模块页面，点击图表模块，加载对应路由

天尘不打野
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-admin 登陆，路由跳转，权限逻辑
01-20
首先记录一下发布element-admin前端框架至服务器遇到的一个坑 最近打包发布element-admin前端框架至服务器，发现打包后，服务器上无法跳转到主页的问题，网上大部分都说是跨域的问题，跨域也会有这种问题，不过笔者这次不是跨域的问题，因为后台已经对跨域做了处理，最终排查发现是由于此框架内mock的数据地址和自己后台地址冲突了，导致线上调用了本地mock数据的地址，（后台地址和本地mock数据的地址一样了），当然如果地址不一样就不会存在这样的问题，也怪自己台懒了。。。 所以在二次开发element-admin框架，数据换成真实后台数据后一定要把mock的相关代码url地址注释掉，或者
003------------将vue+element+admin本地路由，修改为动态路由(学习篇)
skyblue_afan的博客
11-17 766
1、修改路由导航守卫页面，判断何时获取路由数据，并处理获取数据的js。通过网址想直接进入后台进行权限管理。 路由守卫的权限在scr/permission.js文件中 2、修改导航守卫页面 import router from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' // progress bar import 'nprogres
01---vue+element+admin将本地路由修改为权限路由
weixin_47838176的博客
03-14 1874
1.在src/views新建一个cache文件夹，cache文件夹下创建一个index.vue文件 src/views/cache/index.vue <template> <div class="index"> <div class="logout"> <el-button type="danger" @click="handelLogout">退出登录</el-button> </div>
【Abp VNext】实战入门（五）：【9】前端管理界面 vue-element-admin —— Router路由跳转及参数传递
刘永洪的博客
02-18 3039
一、前言： 除了常规的通过标签link形式跳转页面的方法，vue-element-admin 项目中已经自带路由封装，可以在代码中手动控制页面路径跳转， 通常只需要知道如何跳转页面，如何传递参数即可。 配合底层路由拦截功能，参考：【Abp VNext】实战入门（五）：【2】前端管理界面 vue-element-admin —— 路由拦截优化改造 二、必须的页面路径申明配置： 描述：所有页面要进行展示都必须先在路由页面中先行声明（名称、路径…） 1、在根目录router/index.js 中配置写好的vue页
3：管理系统 vue-element-admin 登录 路由切换
echo_s 快乐de小媛~
11-15 7027
关于实战篇：https://juejin.im/post/59097cd7a22b9d0065fb61d2 这里有详细的介绍
vue3+element-plus+admin
04-12
Vue3 + Element-Plus + Admin 是一个现代的前端开发框架，用于构建高效、可复用且易维护的企业级管理后台应用。Vue3 是 Vue.js 的最新版本，它引入了大量新特性和优化，提升了开发效率和性能。Element-Plus 是 ...
tp6-vue-admin:基于thinkphp6+vue2.6+element2.13 前后端分离落地解决方案
05-02
#注意1：vue-admin 中接口请求规则和动态路由，是对应tp6 中的接口规则和权限规则，需同时安装tp6和vue-admin 才能运行项目 #注意2：env 环境配置文件VUE_APP_BASE_API 接口地址，生产环境 或开发环境，需改变自己...
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue3-elementPlus-admin:vue3后台管理模板 , 基于vue3.0 + elementPlus 实现的后台管理系统模板 动态路由 动态菜单 皮肤切换 登录逻辑
05-10
v3-element 基于vue3.x 实现的后台管理系统模板 1、 登录逻辑. 2、 基本布局(基于elementPlus) 3、 动态路由逻辑 4、 动态菜单栏逻辑 5、 面包屑 6、 皮肤切换 7、 假数据模拟路由菜单 gif示例 Project setup yarn...
vue + element-ui实现按钮和权限管理动态路由
01-18
在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现一个包含按钮和权限管理的动态路由系统。这个系统是针对后台管理场景设计的，具备高度可复用性和便捷性，使得开发者能够快速搭建起具有权限控制功能...
vue-element-admin把动态路由放导航列表中间，动态路由刷新跳转404
weixin_43957510的博客
09-25 1866
需求 把动态路由放在导航中间而不是最后 思路 只要在修改原来插入动态路由的地方就可以 操作 修改文件： /src/store/modules/permission.js。 const mutations = { SET_ROUTERS: (state, routes) => { state.addRoutes = routes // state.routes = constantRoutes.concat(routes) //权限路由在最后 // 把权限路由放在中间，在c
vue-element-admin点击按钮跳转新页面方法$router.push
前端视听
09-11 1万+
1：首先在view里面新建一个新的组件页面 addChip.vue 2：打开router/index.js 配置新增组件 { path: 'addChip', component: () => import('@/views/chip/addChip'), name: 'addChip', meta: { title: '新增拼图' }, hidden:true, }, 3：打开chip组件界面，开始写一
vue-element-admin 中怎么点击按钮进行路由跳转并传参
d2916172682的博客
02-27 1182
1.location: (required) 字符串或对象，表示要导航到的目标路由。this.$router.push 是 Vue Router 提供的方法之一，用于在 Vue.js 中进行编程式的路由导航。它可以让你在 JavaScript 代码中动态地导航到不同的路由。通过使用它，你可以在 Vue.js 应用程序中进行灵活的路由导航操作。假设你有一个按钮，当点击它时需要跳转到另一个页面，并且需要传递参数。首先，确保你的路由配置允许接收参数。是一个动态参数，你可以在跳转时将其替换为实际的参数值。
Vue-elementui开启路由实现页面跳转
qq_52998673的博客
02-13 374
Vue-elementui开启路由实现页面跳转
vue--element-admin动态路由
weixin_44023290的博客
06-07 493
思路: 就是把获取的数据转换为routes的格式,如下,更加详细的请看目录@/router/index.js下的数据结构。引入后台接口的方法(也就是封装好的axios，然后把接口统一写在一个js文件里，用的时候直接引入，方便后期维护)这里只给出示例，因为我的数据当时在编写的时候就在后台进行转换了，所以我的转换方法并不适用你们自己的！只要可以把数据转换为规定的结构即可！请自行编写转换方法思路！请自行编写转换方法思路！请自行编写转换方法思路！请自行编写转换方法思路！请自行编写转换方法思路！
单据到单据详情，vue-element-admin页面跳转实现（新开标签）
此人很懒，什么都没有写
05-08 2316
需求实现分3个点： 1、原页面跳转代码编写，包括参数传递 2、目标跳转页面参数接收与数据查询 3、返回功能实现 第一步 在前端页面添加点击事件loadInfo() <el-table v-loading="loading" :data="materialInfoList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /.
vue-element-admin 页面内点详情跳转
热门推荐
wzw_666的博客
10-22 1万+
之前都是点击按钮以弹窗的形式展示信息，现在有个需求是点了页面内的详情按钮后进行路由跳转，跳到一个新的页面上去。 1.先添加路由 route.index.js: { path: '/test', component: Layout, redirect: '/test/', name: 'test', alwaysShow : true, meta: { title: ...
Vue3-admin-element框架学习笔记----5（最终篇--动态路由）
一个努力不被优化的程序员
04-14 605
关于左侧的菜单栏呢都是直接添加或者删除，亦或者本地存储router，但是这终究不是长久和方便之计。
vue-element-admin 框架 页面内跳转非左侧菜单，展示标签导航viewTag
lchmyhua88的博客
11-17 4117
vue-element-admin 框架 页面内跳转非左侧菜单栏页面
element-plus+vue3+vite+admin+js
最新发布
07-13
Admin，通常指管理后台或者后台管理系统，是一种专门为网站管理员设计的界面，集成了用户管理、权限控制、数据操作等功能。通过Element Plus和Vue 3，你可以快速搭建一个美观且功能丰富的后台界面。 加上JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值