用ANTD-Vue做管理页面的左侧菜单 需要在刷新后也能保持左侧菜单被选中和展开 且只能展开一个菜单成品效果图1.在刷新后保持菜单选中这个比较简单 ANTD的API中提供了一个defaultSelectedKeys参数描述：初始选中的菜单项 key 数组
类型： string[]
自己手动实验得知意思就是在数组中填入字符串 例如['key']
默认值为空一级菜单和子菜单都有一个key属性，我后端
转载
2024-02-20 10:03:48
864阅读
Ant Design 是一个基于 umi、dva 和 ant design 的开箱即用的中台前端/设计解决方案。一、umi和dva1.1、什么是umiumi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从
转载
2024-08-21 07:18:52
169阅读
一、路由的设置：跳转另一个组件隐藏另一个组件时在route里设置meta{
path: '/login',
component: Login,
meta: {//源设置
isHidden: true,
}
},用v-show使用在组件上<Footer v-show="!$route.meta.is
转载
2024-03-11 14:05:49
1402阅读
关于React连接动态路由（React Dynamic Routing）：React Dynamic Routing可以根据用户的路由请求动态加载页面内容，常常用于创建单页应用（SPA）。以下是React连接动态路由的流程：引入路由依赖：使用React Dynamic Routing需要引入相关依赖，例如react-router-dom、react-router-config等。配置路由文件：在R
在Vue应用程序中，可以使用路由守卫（route guard）来控制用户的访问权限，从而实现菜单权限设置。实现方法：1.在路由配置中添加meta字段，用于存储路由的访问权限等信息。const router = new VueRouter({
routes: [
{
path: '/home',
component: Home,
meta: { req
转载
2024-03-25 19:04:49
105阅读
1. 顶部菜单栏 伸缩展开按钮需求：默认的菜单栏伸缩按钮是在侧面想换成顶部。 添加文件：/src/components/HeaderContent/index.tsximport React from 'react';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import { MenuFold
转载
2024-06-04 15:55:25
964阅读
文章目录使用 ant-design 官网上的 Table 固定样式代码实现效果展示查找问题解决方法 使用 ant-design 官网上的 Table 固定样式链接: https://antdv.com/components/table-cn/#components-table-demo-fixed-columns代码实现由于我的项目要实现左边第一例为左固定，右边最后一列操作为右固定，按照官网上的
转载
2024-03-21 13:55:22
123阅读
前言：作者本人用vue-antd-pro过程中，有动态路由的需求，看了下官方文档实在是写的比较不清楚，参考了一些博客，发现我使用的版本，有一些改动出入，所以写下这篇博文，希望能帮到有需要的人。npm包 使用的版本如下：{
"name": "vue-antd-pro",
"version": "3.0.2",
"ant-design-vue": "^1.7.6",
"vue": "^2.6.
转载
2024-05-06 19:54:59
1108阅读
首先什么是前端权限控制：就是当用户登录之后，根据不用用户拥有的权限动态添加（addRoutes）用户能访问的路由页面和能看到的菜单页面(v-for)动态路由权限：1.本质就是利用addRoutes这个api来实现动态添加路由权限，然后还可以根据路由权限渲染用户可以看到的菜单选项2.前端来维护两份路由表 ，一份静态路由表这个是所有用户都可以访问的，一份是动态路由表，那么默认挂载的只有静态路由表3.用
转载
2024-04-16 22:14:10
338阅读
如果回答权限问题 答:首先我们项目中的权限可以分为四大类1.接口权限2.按钮权限3.菜单权限4.路由权限 1.接口权限 接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录,登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token 2.菜单权限 (1) 菜单与路由分离，菜单由后端返回 每次路由
转载
2024-05-17 12:22:17
140阅读
一、React 结合 Antd 实现权限列表引入所需相关的组件和文件，如下所示：import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { Menu, Icon } from 'antd'
import logo from '../../assets/im
转载
2024-04-19 14:31:00
169阅读
文章目录常用属性常用事件递归嵌套多级菜单效果 版本ant-design-vue: "^1.7.4",常用属性属性说明默认值mode菜单类型，现在支持垂直、水平、和内嵌模式三种verticalinlineCollapsedinline 时菜单是否收起状态theme主题颜色(light/dark)lightopenKeys(.sync)当前展开的 SubMenu 菜单项 key 数组defaultO
转载
2024-02-27 12:00:01
1051阅读
menu 侧边栏菜单递归循环，和默认高亮默认展开相关配置; 引入ant 后 发现报错 菜单栏循环后高亮和展开子项设置; 菜单 路由 刷新后默认选中 ...
转载
2021-10-14 11:57:00
2628阅读
2评论
1、导航守卫“导航” 表示路由正在发生改变正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。v-router官网：https://ro
转载
2024-10-10 22:50:00
180阅读
1.创建vue,手动预设 2.选择以下两种,预设选择router之后，在package.json的dependencies中可以看到vue-router 3.预设完成后，项目启动创建vue框架；只关注src,先从main.js开始5.手动预设添加router之后，在main.js中，此时已自动引入router，而且挂载了router；（在router.js中export，在ma
引言后台管理系统的搭建，主要的难点就行如何控制系统的权限，下面是我阅读了antd-pro-of-vue的权限控制后，自己总结了一下。 其实权限控制，主要就是控制每个用户拥有的菜单和路由。大致的步骤我会提供一个个章节一步步的描述一下。菜单管理首先我们把系统主页的完整菜单放到菜单管理处来管理，就是使用一个树形控件来管理菜单，如下菜单管理章节所示，我们点击某个节点后，可以在下方的单行表格看到该节点的信息
Table 表格是我们平时在中后台系统中用到最多的组件之一了。在Ant Design Vue中，官方提供了一个Table 表格组件。我们先来介绍一下这个组件Table 表格组件https://vue.ant.design/components/table-cn基础用法 分页组件，部分字段高亮特殊显示等等。详细使用请查阅文档。筛选排序 当然也可以在列表上方做常规搜索，会在后面的S-Table组件中进
转载
2024-04-25 14:50:48
743阅读
最近因为因为项目的原因，一直在寻找一款合适的前端模版，之前的 Vue 前端页面都是自己写的，写多了就烦了，因为功能都差不多，写来写去就没意思了。所以在新项目中想看看市面上的 Vue 后台管理模版，找个现成的，改一改基本就 OK 了，团队也省事一些。老实说，Vue 的生态还是相当丰富的，经典的、新生的后台管理框架都有，我这里和大家分享我们这次重点比较的三个。vue-element-ad
转载
2024-08-01 11:45:05
149阅读
后台管理系统一般通过菜单进行各个功能点的导航，在面临大量菜单时需要考虑如何设计使客户体验更加便捷。作者在最近几个百万级、千万级项目的开发实施过程中，用户对菜单导航结构提出一些修改意见，经过若干次迭代以优化操作体验，作者将迭代过程总结下做个分享。整体布局第一阶段传统树形菜单导航，根据项目的不同，有的采用横向排列，有的固定在左侧顶部菜单：从上到下分别为：标题栏、菜单栏、工作区侧边菜单：导航菜单占据整个
GridManager 是一套可快速、灵活的对table标签进行实例化的表格组件。使用简单快捷, 功能强大，基于原生js实现, 不依赖任何框架，目前支持react、vue、angularjs三大框架。今天就来说一说，gridmanager在react中的使用。引入 基于目前前端项目多数使用webpack或其他工具进行打包部署，所以可以直接通过package.json中
转载
2024-09-11 10:46:01
1208阅读
