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.mzph.cn/news/189515.shtml

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

相关文章

全栈冲刺 之 一天速成MySQL

一、为什么使用数据库 数据储存在哪里? 硬盘、网盘、U盘、光盘、内存(临时存储) 数据持久化 使用文件来进行存储,数据库也是一种文件,像excel ,xml 这些都可以进行数据的存储,但大量数据操作…

高端网站设计公司 -蓝蓝设计数据可视化大屏服务

UI设计公司-蓝蓝设计(北京兰亭妙微科技有限公司)是一支由清华美院毕业的专业团队组成的设计公司。我们的设计师们在大屏科研信息软件UI设计领域拥有多年的工作经验和丰富的行业知识。我们对设计充满热爱,设计不仅是我们的专业和职业&#xff…

行内元素和块级元素分别有哪些?有何区别?怎样转换?

行内元素和块级元素分别有哪些? 常见的块级元素: p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd 常见的行级元素: span、a、img、button、input、select 有何区别? 块级元素: 总是在新行上…

[二分查找]LeetCode1964:找出到每个位置为止最长的有效障碍赛跑路线

本文涉及的基础知识点 二分查找算法合集 作者推荐 动态规划LeetCode2552:优化了6版的1324模式 题目 你打算构建一些障碍赛跑路线。给你一个 下标从 0 开始 的整数数组 obstacles ,数组长度为 n ,其中 obstacles[i] 表示第 i 个障碍的高度…

flutter开发实战-实现获取视频的缩略图封面video_thumbnail

flutter开发实战-实现获取视频的缩略图封面video_thumbnail 在很多时候,我们查看视频的时候,视频没有播放时候,会显示一张封面,可能封面没有配置图片,这时候就需要通过获取视频的缩略图来显示封面了。这里使用了video…

第0篇红队笔记-APT-HTB

nmap 80 port-web尝试 searchploit-无结果 资源隐写查看-无结果 135 port rpcclient rpcinfo.py rpcdump.py rpcmap.py rpcmap.py爆破UUID 查看该UUID的表代表的服务能搜到UUID的漏洞 IOXIDResolver提取IPv6地址 IPV6-nmap smb smb探测目录 文件下载 测试其他目录 zip文件…

Quirks(怪癖)模式是什么?它和 Standards(标准)模式有什么区别?

前言: "Quirks模式"和"Standards模式"是与HTML文档渲染模式相关的两种模式。它们影响着浏览器如何解释和渲染HTML和CSS。理解它们之间的区别对于前端开发者和网页设计师来说是至关重要的。本文将深入讨论Quirks模式和Standards模式的区别,以及它…

vscode如何在没有网络的情况下安装插件

vscode如何在没有网络的情况下安装插件 start 遇到没有网络的电脑,无法直接从插件市场安装vscode的插件。写一下 vscode 插件离线安装的方法. 解决方案 目标电脑没有可以安装插件的网络,那我们只能在有网络的环境下载好我们的插件。然后拷贝软件到无…

一文解决msxml3.dll文件缺失问题,快速修复msxml3.dll

在了解问题之前,我们必须首先清楚msxml3.dll到底是什么。DLL(Dynamic Link Libraries)文件是Windows操作系统使用的一个重要组成部分,用于存储执行特定操作或任务的代码和数据。msxml3.dll为Windows系统提供处理XML文档的功能。如…

键盘打字盲打练习系列之指法练习——2

一.欢迎来到我的酒馆 盲打,指法练习! 目录 一.欢迎来到我的酒馆二.开始练习 二.开始练习 前面一个章节简单地介绍了基准键位、字母键位和数字符号键位指法,在这个章节详细介绍指法。有了前面的章节的基础练习,相信大家对盲打也有了…

Ubuntu 2204 安装libimobiledevice

libimobiledevice是一个开源的软件,它可以直接使用系统原生协议和IOS设备进行通信,类似iMazing,iTunes,libimobiledevice不依赖IOS的私有库,并且连接IOS设备时用的都是原生协议,IOS无需越狱就能实现设备信息…

贝斯手-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息: 题目:贝斯手 作者:Tokeii 提示:无 解题附件: 解题思路&信息收集: 详细信息看了,没有藏料,这次上来就是一个命好名的压缩包浅浅打开一下&…

9.整数转换为布尔值【2023.12.1】

1.问题描述 整数转换为布尔值。 2.解决思路 输入一个整数。 输出布尔值并输出。 3.代码实现 numint(input("请输入一个数字")) boolnumbool(num) print(boolnum)4.运行结果

AutoDL 使用记录

AutoDL 使用记录 1.租用新实例 创建实例需要依次选择:计费方式 → \to → 地区 → \to → GPU型号与数量 → \to → 主机 注意事项: 主机 ID:一个吉利的机号有助于炼丹成功价格:哪个便宜选哪个最高 CUDA 版本:影响…

ElasticSearch知识体系详解

1.介绍 ElasticSearch是基于Lucene的开源搜索及分析引擎,使用Java语言开发的搜索引擎库类,并作为Apache许可条款下的开放源码发布,是当前流行的企业级搜索引擎。 它可以被下面这样准确的形容: 一个分布式的实时文档存储&#xf…

API成批分配漏洞介绍与解决方案

一、API成批分配漏洞介绍 批量分配:在API的业务对象或数据结构中,通常存在多个属性,攻击者通过篡改属性值的方式,达到攻击目的。比如通过设置user.is_admin和user.is_manager的值提升用户权限等级;假设某API的默认接口…

SQL Server 数据库,使用函数查询统计信息

4.1 在查询中使用函数 在前面章节已经学习了一些简单的增、删、改、查询的T-SOL.语句,但是为了更方便快捷地完 成大量的任务,SOLServer提供了一些内部函数,可以和SOLServer的SELECT语句联合使用,也可 以与UPDATE和INSERT一起使用&…

scrapy框架

scrapy文档 文档链接 安装指南 — Scrapy 2.5.0 文档 (osgeo.cn)https://www.osgeo.cn/scrapy/intro/install.html 创建scrapy框架 0.介绍: scrapy是异步非阻塞框架 异步:一个主线程有20个任务,可以来回切换 非阻塞:运行的程序不需…

一、服务器准备

本案例使用VMware Workstation Pro虚拟机创建虚拟服务器来搭建Linux服务器集群,所用软件及版本如下: Centos7.7-64bit 1、三台虚拟机创建 第一种方式:通过iso镜像文件来进行安装(不推荐) 第二种方式:直接复制安装好的虚拟机文…

基于springboot + vue框架的网上商城系统

qq(2829419543)获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:springboot 前端:采用vue技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件&#xf…