力软vue前端开发:使用params跳转传参404问题解决

问题描述

this.$router.push({ name: 'page', query: { id: '001' } }) // 根据路由名称 + query 的方式跳转传参

使用query传参时,参数会拼接在链接后,点击搜索条件链接参数也还在。用户需要重新进入搜索页面。

所以,使用name+params进行传参。参数不会出现在url路径上面,刷新页面时param里面的数据会消失,类似post传参。

this.$router.push({ name: 'page', params: { id: '001' } })  // 根据路由名称 + params 的方式跳转传参

但是在力软的默认路由中没有给每个页面的name赋值。所有无法获取要跳转页面的name值。如下:

const requireComponent = require.context('../views', true, /i\.js$/)
requireComponent.keys().map(fileName => {const nameList = fileName.split('/')if (nameList.length == 3 && nameList[2] == 'i.js') {const name = nameList[1]pageViews.push({ name: '', path: `/${module.code}/${name}`, meta: requireComponent(fileName).default })}
})

解决方法第一步:

提示:给页面赋上name值:

const requireComponent = require.context('../views', true, /i\.js$/)
requireComponent.keys().map(fileName => {const nameList = fileName.split('/')if (nameList.length == 3 && nameList[2] == 'i.js') {const name = nameList[1]pageViews.push({ name: name, path: `/${module.code}/${name}`, meta: requireComponent(fileName).default })}
})

测试:

经测试,点击跳转后直接到了404,无法找到页面

 解决方法第二步:

经过调试,发现require.context('../views', true, /i\.js$/)获取到的目录名称均为首字母大写,但在后台菜单管理配置成了小写。所以匹配不到。于是修改了菜单上的路径(要和文件夹名称保持一致)。

 

测试:

能正常跳转和传参。 

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

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

相关文章

【探索Linux】—— 强大的命令行工具 P.16(进程信号 —— 信号产生 | 信号发送 | 核心转储)

阅读导航 引言一、概念(1)基本概念(2)kill -l命令(察看系统定义的信号列表) 二、产生信号(1)通过终端按键产生信号-- 信号产生-- Core Dump(核心转储) &#…

量子计算的发展

目录 一、量子力学的发展历程二、量子计算的发展历程三、量子计算机的发展历程四、量子信息科学的发展 一、量子力学的发展历程 量子力学是现代物理学的一个基本分支,它的发展始于20世纪初。以下是量子力学发展的几个重要阶段: 普朗克(1900&…

分享一个鬼~

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 先看效果: 上源码: import GUI from "https://cdn.jsdelivr.net/npm/lil-gui0.18.2/esm"const canv…

二分查找之红蓝二分查找

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …

鸿蒙原生应用/元服务开发-AGC分发如何上架HarmonyOS应用

一、上架整体流程 二、上架HarmonyOS应用 获取到HarmonyOS应用软件包后,开发者可将应用提交至AGC申请上架。上架成功后,用户即可在华为应用市场搜索获取开发者的HarmonyOS应用。 配置应用信息 1.登录AppGallery Connect,选择“我的应用”。…

CCC联盟——UWB MAC(二)

在上一篇文章中对CCC联盟UWB MAC框架进行了介绍,在本文中,将MAC层的时间网格进行简单介绍。 2、MAC时间网格(Time Grid) DK UWB测距协议属于一对多(One to Many, O2M)测距协议。发起者,每次发送4帧,接收N帧…

学习Pandas 二(Pandas缺失值处理、数据离散化、合并、交叉表与透视表、分组与聚合)

文章目录 六、高级处理-缺失值处理6.1 检查是否有缺失值6.2 缺失值处理6.3 不是缺失值NaN,有默认标记的 七、高级处理-数据离散化7.1 什么是数据的离散化7.2 为什么要离散化7.3 如何实现数据的离散化 八、高级处理-合并8.1 pc.concat实现合并,按方向进行…

Linux:Ubuntu虚拟机安装详解:VMware下的逐步指南

目录 1. centOS系统 2. ubuntu系统 1. 下载Ubuntu映像 step1 step2 step3 2. 新建虚拟机 step1 step2 Step3 step4 step5 step6 内存 内核 映像 显示 网络 3. 网络配置 NAT模式 本机IP获取 ​编辑 bridge模式 4. 开启虚拟机 5. 虚拟机常用配置 语言 …

为什么,word文件在只读模式下,仍然能编辑?

Word文档设置了只读模式,是可以编辑的,但是当我们进行保存的时候就会发现,word提示需要重命名并选择新路径才能够保存。 这种操作,即使可以编辑文字,但是原文件是不会受到影响的,编辑之后的word文件会保存到…

Redis Stream消息队列

什么是Stream? Stream 实际上是一个具有消息发布/订阅功能的组件,也就常说的消息队列。其实这种类似于 broker/consumer(生产者/消费者)的数据结构很常见,比如 RabbitMQ 消息中间件、Celery 消息中间件,以及 Kafka 分布式消息系统等&#x…

openEuler20.03学习01-创建虚拟机

赶个时髦,开始学习openEuler 20.03 (LTS-SP3) 操作系统iso下载地址:https://repo.openeuler.openatom.cn/openEuler-20.03-LTS-SP3/ISO/x86_64/openEuler-20.03-LTS-SP3-x86_64-dvd.iso 公司有现成的vmware环境,创建虚拟机i测试&#xff0c…

qgis添加arcgis的mapserver

左侧浏览器-ArcGIS地图服务器-右键-新建连接 Folder: / 展开-双击图层即可