Vue3 Router跳转传参

最近遇到这个问题router跳转传参,真是要了老命了。

根据网上各位大神给出的方法,试了

import { useRouter } from 'vue-router'

const router = useRouter()

//1. 无法跳转
router.push(name:'',params:{})

//2. 可以跳转, 但需要在定义router同时定义占位符,比如path:'/user/:userid',否则跳转后收不到值
router.push(path:'',query:{})

1. router.push(name:'',params:{})

params好像已经被移除了,根本无法跳转

2. router.push(path:'', query:{})

可以跳转,但是定义router的同时需要定义占位符,比如path:'/user/:id',而且参数会以/user/1001的形式显示在URL中

const routes = [
    {
        path:'/user/:id',
        name:User,
        component:User
    }
  ]

最后仔细翻看官网,使用了官网推荐的状态管理才得以解决,但是仍有其他问题,最后会讲

如上图,新建一个store.js,用于保存你跳转时想要保存的值,比如:

import { reactive } from 'vue'

export const store = reactive({
  userinfo: {
    name: '',
    id: ''
  }
})

假设我们想要从A.vue跳转到B.vue,那么

A.vue:

import { store } from '../store/store.js'

//赋值
store.userinfo.id= 1001
//跳转
router.push('/B')

B.vue

import { store } from '../store/store.js'

let userId = store.userinfo.id //接受值

注意:router跳转不是传统意义的从一个html跳转到另外一个html,所以一旦刷新整个页面,store里面的值就没有了,需要重新赋值!比如这里跳转到B.vue后,如果刷新页面,store.userinfo.id就变成空字符串了。

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

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

相关文章

(五)基于高尔夫优化算法GOA求解无人机三维路径规划研究(MATLAB代码)

一、无人机模型简介: 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献: [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、高尔夫优化算法GOA简介 高尔夫优化算法…

react-flip-move结合array-move实现前端列表置顶效果

你有没有遇到这样的需求?点击左侧列表项,则像聊天会话窗口一样将被点击的列表项置顶。 如果只是单纯的置顶的话,直接使用array-move就可以实现了,但置顶效果多少有点突兀~ 先上代码,直接使用array-move的情况&#xf…

用于缓存一些固定名称的小组件

项目中,用于缓存姓名、地名、单位名称等一些较固定名称的id-name小组件。用于减少一些表的关连操作和冗余字段。优化代码结构。扩展也方便,写不同的枚举就行了。 具体用法: {NameCacheUser.USER.getName(userId);NameCacheUser.ACCOUNT.getN…

文心一言 VS 讯飞星火 VS chatgpt (146)-- 算法导论12.2 1题

一、用go语言,假设一棵二叉搜索树中的结点在1到 1000 之间,现在想要查找数值为 363 的结点。下面序列中哪个不是查找过的序列? a.2,252,401,398,330,344,397,363。 b.9…

vtk中二次曲面的显示

官方示例地址: https://examples.vtk.org/site/Cxx/Visualization/DisplayQuadricSurfaces/ 显示效果: 源码: import vtk import vtkmodules.vtkInteractionStyle import vtkmodules.vtkRenderingOpenGL2 from vtkmodules.vtkCommonColor i…

SAP SD 创建交货单 报错 VL461 VL248

因为生产环境已经被改好了,无法跟踪 所以换到测试环境重现一把,如何追根究底 对比正常订单发现 计划行 VBEP-LMENG,VBEP-BMENG这两个字段上的值跟 订单数量不一致。 尝试修改2者的数据跟订单数据一致,则可以正常创建交货单 实际原因是&a…

Neo4j 数据库管理 数据备份与恢复(头歌)

文章目录 第1关:数据备份与恢复任务描述相关知识数据备份数据导入 编程要求测试说明答案测试前准备Cypher 代码数据备份与导入 第1关:数据备份与恢复 任务描述 本关任务:熟练掌握数据备份与恢复。 相关知识 为了完成本关任务,…

INFINI Easysearch 与华为鲲鹏完成产品兼容互认证

何为华为鲲鹏认证 华为鲲鹏认证是华为云围绕鲲鹏云服务(含公有云、私有云、混合云、桌面云)推出的一项合作伙伴计划,旨在为构建持续发展、合作共赢的鲲鹏生态圈,通过整合华为的技术、品牌资源,与合作伙伴共享商机和利…

基于单片机的排队叫号系统设计

1.设计任务 利用AT89C51单片机为核心控制元件,设计一个节日彩灯门,设计的系统实用性强、操作简单,实现了智能化、数字化。 基本要求:利用单片机AT89C51设计排队叫号机,能实现叫号功能。 创新:能显示叫号…

算法通关村第一关—链表高频面试题(白银)

链表高频面试题 一、五种方法解决两个链表的第一个公共子节点的问题 面试 02.07.链表相交1.首先想到的是暴力解,将第一个链表中的每一个结点依次与第二个链表的进行比较,当出现相等的结点指针时,即为相交结点。虽然简单,但是时间…

sso单点登录

一:业务需求 客户要求在门户网站上实现一次登录能访问所以信任的系统 二: 处理方式 实现sso单点登录需要前后端配合处理 1. 通过网页授权登录获取当前用户的openid,userid 2.设置单点登录过滤器并进行参数配置 3.另外写一个登录接口&…

制造企业建设数字工厂管理系统的难点主要有哪些

随着科技的飞速发展,制造企业正面临着从传统生产模式向数字化、智能化转型的挑战。其中,建设数字工厂管理系统是实现这一目标的重要途径。然而,在实际操作过程中,制造企业往往会遇到一系列难点。本文将对这些难点进行详细的分析。…

socket.io介绍

1. 使用的技术 Socket.IO 是一个封装了 Websocket、基于 Node 的 JavaScript 框架,包含 client 的 JavaScript 和 server 的 Node。其屏蔽了所有底层细节,让顶层调用非常简单。 另外,Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket…

Vue H5页面长按保存为图片

安装依赖&#xff1a;npm install html2canvas -d <template><div class"index"><div id"captureId" class"capture" v-show"firstFlag"><ul><li>1</li><li>2</li><li>3<…

R语言实操记录——R包无法安装,报错:Warning in system(cmd) : ‘make‘ not found

R语言 R语言实操记录——R包无法安装&#xff0c;报错&#xff1a;Warning in system(cmd) : ‘make‘ not found 文章目录 R语言一、起因二、具体步骤2.1、确认问题源2.2、安装RTools2.3、与R(/Rstudio)绑定2.4、验证可行性 三、疑惑 一、起因 R语言在包的安装上是真的方便&…

Prosys OPC Client连接OPC DA

Prosys OPC Client连接OPC DA Prosys OPC 客户端将帮助排除 OPC 连接故障并测试 OPC 服务器。 您可以读写数据、浏览服务器以及导出和导入地址空间。 OPC 客户端轻巧、快速且易于使用。 支持 OPC DA 1.0a 和 OPC DA 2.05a 官方地址: https://www.prosysopc.com/products/opc-…

SpringBoot 整合 Neo4j 实战(头歌)

文章目录 第1关&#xff1a;认识 Spring DATA Neo4J任务描述相关知识Spring DATA Neo4J - 简介Spring JDBC / Spring ORM 模块的缺点&#xff1a;Spring 数据模块的优点&#xff1a;Spring 数据模块功能&#xff1a;Spring DATA Neo4j 模块的附加功能&#xff1a; Spring DATA …

联想SR660V2服务器重置BMC后无法设置BMC管理IP

之前登录后台显示BMC账号密码不对&#xff0c;然后把BMC重置了&#xff0c;重置以后发现无法设置IP地址 联想官方的回复是&#xff1a; 1. 机器AC上电后&#xff0c;需等待7分钟左右, 再开机&#xff0c;让bmc完全启动。 2. 在UEFI及系统下配置bmc网络&#xff0c;需等待3分钟…

rest_framework_django学习笔记一(序列化器)

rest_framework_django学习笔记一(序列化器) 一、引入Django Rest Framework 1、安装 pip install djangorestframework2、引入 INSTALLED_APPS [...rest_framework, ]3、原始RESTful接口写法 models.py from django.db import models 测试数据 仅供参考 INSERT INTO de…

go学习之json和单元测试知识

文章目录 一、json以及序列化1.概述2.json应用场景图3.json数据格式说明4.json的序列化1&#xff09;介绍2&#xff09;应用案例 5.json的反序列化1&#xff09;介绍2&#xff09;应用案例 二、单元测试1.引子2.单元测试-基本介绍3.代码实现4.单元测试的细节说明5.单元测试的综…