vue3 项目搭建-9-通过 router 在跳转页面时传参

第一步,在跳转链接处挂载方法,将要传输的数据传入:

            <a href="#" @click.prevent="goToArticle(obj.id)" class="click"><h1>{{obj.title}}</h1><p>作者:{{obj.author}}</p><p>{{obj.summary}}</p><p id="views">浏览:{{obj.viewCounts}}</p></a>

第二步,导入 router,在方法中 push 参数到 router

import router from '@/router.js'const goToArticle = (articleId) => {router.push({ name: 'Article', params: { articleId } }); // 通过路由名称和参数进行跳转
};

第三步,在 router 中接受 push 的参数

const routes = [{path: '/',component: Layout,},{path: '/article/:articleId', // 使用 :articleId 定义路由参数name: 'Article',component: Article,}
];

第四步,需要参数的页面拿到参数

import { useRoute } from 'vue-router';const route = useRoute();
const articleId = route.params.articleId;
// 现在就可以使用articleId这个变量了,比如根据它去请求文章详情数据等
console.log('获取到的文章ID为:', articleId);

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

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

相关文章

【RBF SBN READ】hadoop社区基于RBF的SBN READ请求流转

读写分离功能的背景及架构 当前联邦生产集群的各个子集群只有Active NameNode在工作,当读写任务变得繁忙的时候,只有一个Active负责处理的话,此时集群的响应和处理能力业务侧感知会明显下降,为此,我们将引入Observer架构,实现读写功能的分离,使得Active只负责写请求,而…

利用R包QstFstComp包进行Qst-Fst分析

1.Qst-Fst分析 安装和加载QstFstComp包 首先&#xff0c;你需要安装devtools包&#xff0c;如果尚未安装&#xff0c;可以使用以下命令安装&#xff1a; install.packages("devtools") 2. 然后&#xff0c;使用devtools安装QstFstComp包&#xff1a;R library(de…

视频自学笔记

一、视频技术基本框架 二、视频信号分类 2.1信号形式 2.1.1模拟视频 模拟视频是指由连续的模拟信号组成的视频图像&#xff0c;以前所接触的电影、电视都是模拟信号&#xff0c;之所以将它们称为模拟信号&#xff0c;是因为它们模拟了表示声音、图像信息的物理量。摄像机是获…

操作系统——大容量存储结构

笔记内容及图片整理自XJTUSE “操作系统” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 大容量存储结构概述 磁盘 磁盘为现代计算机系统提供大量外存。每个盘片为平的圆状&#xff08;类似CD&#xff09;&#xff0c;普通盘片直径为4.5~9.0厘米。盘片的两面都涂着…

Python 正则表达式常用特殊字符及其含义

以下是 Python 正则表达式常用特殊字符及其含义 的全面整理&#xff0c;涵盖了常见和重要的正则符号&#xff0c;以及它们的示例&#xff0c;适合用来写博客或学习使用&#xff1a; Python 正则表达式常用特殊字符及其含义 1. . (点号) 含义&#xff1a;匹配除换行符 \n 以外…

子类调用父类同名方法和属性

1、全量代码 class Master:def __init__(self):self.kongfu [古法煎饼果子配方]print(fMaster_self:{self})def make_cake(self):print(f运用{self.kongfu}制作煎饼果子)class School():def __init__(self):self.kongfu [学校煎饼果子配方]print(fSchool_self:{self})def m…

Java Serializable 序列化

Java的Serializable接口是Java序列化机制的核心&#xff0c;它允许一个对象的状态被转换为字节流&#xff0c;从而可以方便地进行存储或传输。 序列化后的对象可以被写到数据库、存储到文件系统&#xff0c;或者通过网络传输。 要在 Java 中使一个类可序列化&#xff0c;你需要…

CSS一些小点 —— 12.7

1. box-sizing: border-box box-sizing 属性&#xff0c;默认值为 content-box box-sizing: border-box 使padding和border的值不会再影响元素的宽高&#xff1b;padding和border的值算在指定宽高的内部&#xff08;但是外边距依然算做外部&#xff09; 2. overflow: hidden …

【GESP】C++一级练习 luogu-P1425, 小鱼的游泳时间

GESP一级综合练习&#xff0c;主要涉及时间计算&#xff0c;难度★☆☆☆☆。 题目题解详见&#xff1a;https://www.coderli.com/gesp-1-luogu-p1425/ 【GESP】C一级练习 luogu-P1425, 小鱼的游泳时间 | OneCoderGESP一级综合练习&#xff0c;主要涉及时间计算&#xff0c;难…

【网络协议栈】数据链路层(内附手画分析图 简单易懂)以太网、MAC地址、局域网、交换机、MTU、ARP协议

每日激励&#xff1a;【无限进步】“梦想可以大&#xff0c;但第一步总是小” 绪论​&#xff1a; 本章将开始到达TCP/IP协议中的最后一层数据链路层&#xff0c;本章将会写到我们日常中常见的局域网以及认识数据链路层中非常重要的协议ARP协议&#xff0c;后续还将进行更新网络…

docker怎么commit tag push?

在 Docker 中&#xff0c;commit、tag 和 push 是用于创建和推送自定义镜像到仓库的三个不同步骤。以下是每个命令的详细说明和使用方法&#xff1a; ### 1. docker commit 当你对一个运行中的容器做了修改&#xff0c;并希望将这些修改保存为一个新的镜像时&#xff0c;可以使…

Java多线程与线程池技术详解(四)

接受失败&#xff1a;“失败是什么&#xff1f;没有什么&#xff0c;只是更走近成功一步&#xff1b;成功是什么&#xff1f;就是走过了所有通向失败的路&#xff0c;只剩下一条路&#xff0c;那就是成功的路。”这句话很好地诠释了如何看待失败的问题&#xff0c;即每一次跌倒…

二叉树的深搜(不定期更新。。。。。)

二叉树的深搜 验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左 子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉…

51c嵌入式~单片机合集3

我自己的原文哦~ https://blog.51cto.com/whaosoft/12581900 一、STM32代码远程升级之IAP编程 IAP是什么 有时项目上需要远程升级单片机程序&#xff0c;此时需要接触到IAP编程。 IAP即为In Application Programming&#xff0c;解释为在应用中编程&#xff0c;用户自己的程…

使用setsockopt函数SO_BINDTODEVICE异常,Protocol not available

前言 最近在使用OLT的DHCP Server的时候发现一些异常现象&#xff0c;就是ONU发的一个vlan的discover包其他不同vlan的DHCP地址池也会收到&#xff0c;导致其他服务器也发了offer包&#xff0c;ONU同时会有多个ip地址。一开始是没有使用SO_BINDTODEVICE&#xff0c;后面查到使…

02 conda常用指令

目录 命令快速查找命令详细解释列出当前conda中存在的解释器环境使用指定的解释器环境创建虚拟环境激活自己创建的虚拟环境虚拟环境删除切换回主环境找到你计算机中安装的miniconda3的跟目录找到虚拟环境的目录选择需要删除的虚拟环境文件夹确认环境是否删除 补充删除虚拟环境指…

BEVFormer详细复现方案

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

应用案例 | 船舶海洋: 水下无人航行器数字样机功能模型构建

水下无人航行器数字样机功能模型构建 一、项目背景 为响应水下装备系统研制数字化转型及装备系统数字样机建设的需要&#xff0c;以某型号水下无人航行器&#xff08;Underwater Unmanned Vehicle&#xff0c;UUV&#xff09;为例&#xff0c;构建UUV数字样机1.0功能模型。针对…

npm (Node Package Manager) 简介

npm 是 Node.js 的默认包管理工具&#xff0c;用于管理和分发JavaScript库和工具。它允许开发者轻松安装、更新、配置和卸载这些包。npm 提供了一个命令行客户端&#xff0c;同时也维护着一个大型的在线软件注册表&#xff08;npm registry&#xff09;&#xff0c;其中包含了成…

【NIPS2024】Unique3D:从单张图像高效生成高质量的3D网格

背景&#xff08;现有方法的不足&#xff09;&#xff1a; 基于Score Distillation Sampling &#xff08;SDS&#xff09;的方法&#xff1a;从大型二维扩散模型中提取3D知识&#xff0c;生成多样化的3D结果&#xff0c;但存在每个案例长时间优化问题/不一致问题。 目前通过微…