vue3/vue2若依框架对比,点击新增编辑跳转到新页面(新增编辑共用代码)

news/2024/5/25 9:26:05/文章来源:https://blog.csdn.net/qq_44971069/article/details/136685285

vue2若依框架:
router里面定义好,编辑里面添加一个id

  {path: '/filmManagement',component: Layout,hidden: true,redirect: 'noredirect',children: [{path: 'editFilmDetail',component: () => import('@/views/filmManagement/editFilmDetail'),name: 'editFilmDetail',meta: { title: '新增剧集', icon: '' }}]},{path: '/filmManagement',component: Layout,hidden: true,redirect: 'noredirect',children: [{path: 'editFilmDetail/:id',component: () => import('@/views/filmManagement/editFilmDetail'),name: 'editFilmDetail',meta: { title: '编辑剧集', icon: '' }}]},

跳转的时候,路径中添加id

<el-button size="mini" type="text" :disabled="filmStatus==1" @click="$router.push({path:'/filmManagement/editFilmDetail/'+filmId,query:{id:filmId,row:scope.row,type:1}})">编辑</el-button>

Vue3若依框架:
这里基本没什么区别

{path: '/filmManagement',component: Layout,hidden: true,redirect: 'noredirect',children: [{path: 'editFilmDetail/:id',component: () => import('@/views/filmManagement/editFilmDetail'),name: 'editFilmDetail',meta: { title: '编辑剧集', icon: '' }}]},{path: '/filmManagement',component: Layout,hidden: true,redirect: 'noredirect',children: [{path: 'editFilmDetail',component: () => import('@/views/filmManagement/editFilmDetail'),name: 'editFilmDetail',meta: { title: '新增剧集', icon: '' }}]},

通过模板字符串${id}拼接在跳转路径上

<el-button @click="$router.push({path:`/filmManagement/editFilmDetail${filmId}`,query:{id:filmId,row:JSON.stringify(scope.row),type:1}})" link type="primary">编辑</el-button>

在这里插入图片描述在若依框架菜单里面配置菜单:
1.新增
在这里插入图片描述

2.编辑
在这里插入图片描述

这样新增和编辑共用一套代码,但是菜单栏tab上显示的是两个不同的名字:
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7c4565065c604892a9088919e98b316c.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1006373.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序如何实现下拉刷新

1.首先在你需要实现下拉刷新页面的json文件中写入"enablePullDownRefresh": true。 2.在js文件的onPullDownRefresh() 事件中实现下拉刷新。 实现代码 onPullDownRefresh() {console.log(开始下拉刷新)wx.showNavigationBarLoading()//在标题栏中显示加载图标this.d…

常用MII接口详解

开放式系统互连 (OSI) 模型 以太网层 位于最底部两层 &#xff0c;物理层(physical)和数据链路层(Date link)。 从百兆以太网接口开始 首先是百兆以太网规定的两种接口 介质无关接口 (MII) Media Independent Interface 介质相关接口 (MDI) Medium Dependent Interfa…

【大厂AI课学习笔记NO.72】AI与云计算

AI项目依靠云计算&#xff0c;借助云的力量&#xff0c;快速的启动业务&#xff0c;是比较好的一种选择。 AI模型训练过程中&#xff0c;出现算力突增&#xff0c;云计算成本低。 云平台提供一站式解决方案&#xff0c;创业公司的选择。 云端AI和边缘端的AI&#xff0c;是我们…

【机器学习】一文掌握逻辑回归全部核心点(上)。

逻辑回归核心点-上 1、引言2、逻辑回归核心点2.1 定义与目的2.2 模型原理2.2.1 定义解析2.2.2 公式2.2.3 代码示例 2.3 损失函数与优化2.3.1 定义解析2.3.2 公式2.3.3 代码示例 2.4 正则化2.4.1 分类2.4.2 L1正则化2.4.3 L2正则化2.4.4 代码示例 3、总结 1、引言 小屌丝&#…

Java高级编程—泛型

文章目录 1.为什么要有泛型 (Generic)1.1 泛型的概念1.2 使用泛型后的好处 2.在集合中使用泛型3.自定义泛型结构3.1 自定义泛型类、泛型接口3.2 自定义泛型方法 4.泛型在继承上的体现5.通配符的使用5.1 基本使用5.2 有限制的通配符的使用 1.为什么要有泛型 (Generic) Java中的…

uniapp h5 部署

uniapp 配置 服务器文件路径 打包文件结构 //nginx 配置 server {listen 8300;server_name bfqcwebsiteapp;charset utf-8;#允许跨域请求的域&#xff0c;* 代表所有add_header Access-Control-Allow-Origin *;#允许带上cookie请求add_header Access-Control-Allow-C…

【Pytorch】进阶学习:深入解析 sklearn.metrics 中的 classification_report 函数---分类性能评估的利器

【Pytorch】进阶学习&#xff1a;深入解析 sklearn.metrics 中的 classification_report 函数—分类性能评估的利器 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合…

Covalent Network (CQT) 通过统一 API 集成,为 Gnosis Chain 的 AI 潜力赋能

作为一个为超 225 个链提供服务的领先多链索引器&#xff0c;Covalent Network (CQT) 正在与知名的 EVM 区块链基础设施提供者 Gnosis Chain 展开一项激动人心的合作。这一战略合作象征着先进的实时数据索引技术的集成&#xff0c;包括 Covalent Network (CQT) 的统一 API 和 G…

前端项目,个人笔记(一)【定制化主题 + 路由设计】

目录 1、项目准备 1.1、项目初始化 1.2、elementPlus按需引入 注&#xff1a;使用cnpm安装elementplus及两个插件&#xff0c;会报错&#xff1a;vueelement-plus报错TypeError: Cannot read properties of null (reading isCE ) &#xff0c;修改&#xff1a; 测试&#…

一站式解决方案:uni-app条件编译及多环境配置,appid动态修改攻略!

前言 这篇文章主要介绍uniapp在Hbuilderx 中&#xff0c;通过工程化&#xff0c;区分不同环境、动态修改小程序appid以及自定义条件编译&#xff0c;解决代码发布和运行时手动切换到问题。 背景 在企业级的应用中&#xff0c;通常会分为&#xff0c;开发、联调、生产等多个环…

基于CNN的图像超分辨率

单图像超分辨率 (Single image super resolution&#xff0c;SR) 是计算机视觉中的一个经典问题&#xff0c; 其目的是从单个低分辨率图像中恢复高分辨率图像。这个问题本质上是不适定的&#xff0c;因为对于任何给定的低分辨率像素都存在解决方案的多重性。换句话说&#xff0…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:DatePicker)

日期选择器组件&#xff0c;用于根据指定日期范围创建日期滑动选择器。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 DatePicker(options?: DatePickerOptions) 根据指定范…

Github 2024-03-13 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-03-13统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目2Python项目2非开发语言项目2HTML项目1CSS项目1Dart项目1TypeScript项目1Go项目1JavaScript项目1《Hello 算法》:动画图解、一键运行的…

利用“定时执行专家”软件的25种任务与12种触发器,提升IT系统管理自动化水平

在IT系统管理中&#xff0c;自动化是提高工作效率、减少人为错误的关键。而《定时执行专家》这款软件&#xff0c;以其强大的功能、易用性和毫秒级的执行精度&#xff0c;成为了IT系统管理员的得力助手。今天&#xff0c;我们就来探讨一下如何利用这款软件的25种任务类型和12种…

Node.js入门基础—day01

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;给自己一个梦想&#xff0c;给世界一个惊喜。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章目录 初识node.js什…

vivo统一接入网关VUA转发性能优化实践

作者&#xff1a;vivo 互联网服务器团队 - Qiu Xiangcun 本文将探讨如何通过使用Intel QuickAssist Technology&#xff08;QAT&#xff09;来优化VUA的HTTPS转发性能。我们将介绍如何使用QAT通过硬件加速来提高HTTPS转发的性能&#xff0c;并探讨QAT在不同应用场景中的表现。最…

Day32:安全开发-JavaEE应用Servlet路由技术JDBCMybatis数据库生命周期

目录 JavaEE-HTTP-Servlet&路由&周期 JavaEE-数据库-JDBC&Mybatis&库 思维导图 Java知识点&#xff1a; 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;序列化数据&#xff0c;身份验证&#xff0c;框架开发&#xff0c;第三方库使用等. 框架…

数据结构与算法——排序(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

探索Java高并发编程之道:理论与实践

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 简介 随着互联网和信息技术的快速发展&#x…

使用Nginx进行负载均衡

什么是负载均衡 Nginx是一个高性能的开源反向代理服务器&#xff0c;也可以用作负载均衡器。通过Nginx的负载均衡功能&#xff0c;可以将流量分发到多台后端服务器上&#xff0c;实现负载均衡&#xff0c;提高系统的性能、可用性和稳定性。 如下图所示&#xff1a; Nginx负…