【Vue】面经基础版-动态路由传参

实现步骤

  • 改造路由
  • 动态传参
  • 在详情页获取参数

代码实现

改造路由

router/index.js

...
{path: '/detail/:id',component: ArticleDetail
}

@\views\Article.vue

<div class="article-item" v-for="item in articelList" :key="item.id" @click="$router.push(`/detail/${item.id}`)">....</div>

@\views\ArticleDetail.vue

created(){console.log(this.$route.params.id)
}

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

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

相关文章

元音 (音标) 和元音字母的区别

元音 [音标] 和元音字母的区别 1. 音位 (phoneme)1.1. Correspondence between letters and phonemes 2. 元音 (vowel)3. 辅音 (consonant)3.1. Consonant sounds and consonant letters 4. 元音字母 (vowel letter)References 1. 音位 (phoneme) https://en.wikipedia.org/wi…

五分钟上手IoT小程序

五分钟上手IoT小程序 IoT小程序框架搭建开发环境首先安装NodeJs安装NodeJs验证安装成功 安装cnpm 安装VSCode 开发IDE下载开发IDE安装开发IDE安装框架脚手架 下载模拟器创建工程项目应用编译(打包构建) VSCode 开发IDE安装插件通过开发插件创建工程编译工程debug编译编译太慢问…

13、SpringBoot 源码分析 - 自动配置深度分析六

SpringBoot 源码分析 - 自动配置深度分析六 refresh和自动配置大致流程AutoConfigurationImportSelector的fireAutoConfigurationImportEvents通知自动配置导入事件AutoConfigurationGroup的selectImports封装成Entry返回MyAutoConfiguration自动配置类创建META-INF文件夹和文件…

3、前端本地环境搭建

前端本地环境搭建 安装node [node下载地址] https://nodejs.org/en/download/prebuilt-installer 选择LTS的版本进行下载 下载后直接双击点击&#xff0c;选择自己想要安装到的目录一直点下一步即可&#xff08;建议不要安装到c盘&#xff09; 安装完成后配置环境变量&am…

Uber 提升 Presto 集群稳定性的 GC 调优方法

Presto at Uber Uber 利用开源的 Presto 查询各种数据源&#xff0c;无论是流式还是归档数据。Presto 的多功能性赋予我们做出基于数据的明智商业决策的能力。我们在两个地区运行了大约20个 Presto 集群&#xff0c;总共超过10,000个节点。我们有大约12,000个每周活跃用户&…

HIP的应用可移植性

Application portability with HIP — ROCm Blogs (amd.com) 许多科学应用程序在配备AMD的计算平台和超级计算机上运行&#xff0c;包括Frontier&#xff0c;这是世界上第一台Exascale系统。这些来自不同科学领域的应用程序通过使用Heterogeneous-compute Interface for Portab…

Socket编程学习笔记之TCP与UDP

Socket&#xff1a; Socket是什么呢&#xff1f; 是一套用于不同主机间通讯的API&#xff0c;是应用层与TCP/IP协议族通信的中间软件抽象层。 是一组接口。在设计模式中&#xff0c;Socket其实就是一个门面模式&#xff0c;它把复杂的TCP/IP协议族隐藏在Socket接口后面&#…

cpp--lua--cpp执行lua

教程 lua--24章--CAPI 链接1 lua_State--虚拟栈 本质上就是一个结构体&#xff1a; 源码&#xff1a; typedef struct lua_State lua_State; 源码 作用 用来实现C(C)和lua互传值。 虚拟栈数据的存储和索引 链接 为什么要选择使用虚拟栈 操作虚拟栈的函数 链接

【Python报错】已解决ModuleNotFoundError: No module named ‘xxx‘ in Jupyter Notebook

解决Python报错&#xff1a;ModuleNotFoundError: No module named ‘xxx’ in Jupyter Notebook 在使用Jupyter Notebook进行数据分析或科学计算时&#xff0c;我们经常需要导入各种Python模块。如果你遇到了ModuleNotFoundError: No module named xxx的错误&#xff0c;这通常…

STM32F103C8T6基于HAL库移植uC/OS-III

文章目录 一、建立STM32CubeMX工程二、移植1、 uC/OS-III源码2、移植过程 三、配置相关代码1、bsp.c和bsp.h2、main.c3、修改启动代码4、修改app_cfg.h文件5、修改includes.h文件6、修改lib_cfg.h文件 四、编译与烧录总结参考资料 学习嵌入式实时操作系统&#xff08;RTOS&…

Django 里实现表格内容上传

先看效果图&#xff1a; 当没有添加数据&#xff0c;就按 提交 键就会出现报错 下面是操作步骤 1. 先在 views.py 文件里做添加 # 在 views.py class AssetModelForm(forms.ModelForm):#newField forms.CharField()class Meta:model models.AssetSet fields [name, pri…

基于zyyo主页与無名の主页合并二改,一款适合新手的个人主页

pengzi主页&#x1f64b; 项目地址 简洁的布局&#xff1a;主页应该有清晰的布局&#xff0c;包括一个简洁的导航菜单和易于浏览的内容区域。避免使用过多的花哨效果&#xff0c;保持页面简洁明了。 个人资料介绍&#xff1a;在主页上展示一段简短的个人介绍&#xff0c;包括…

前端预览pdf文件(后端返回pdf文件流)

前端预览pdf文件(后端返回pdf文件流) 怎么判断后端是不是返回的文件流&#xff1f; 我的后端给的接口直接在浏览器输入完整地址会自动下载pdf文件&#xff0c;这样就是返回的pdf文件流&#xff0c;亲试比较方便的有iframe和直接window.open临时地址. window.open临时地址. f…

QT中调用第三方库的翻译接口时,接口内部加载翻译文件资源失败,导致界面无法正确显示翻译结果

1、背景 在 QT中如何对引入的第三方库进行翻译 一文中我们验证了如何对程序中引用的第三方库进行翻译的手段,当时第三方库内部翻译文件的加载是基于以下形式(将qm文件放置于exe同级目录下形式加载的)。 // 第三方库接口 void MainWindow::setLanguage(QString context) {i…

电机专用32位MCU PY32MD310,Arm® Cortex-M0+内核

PY32MD310是一颗专为电机控制设计的MCU&#xff0c;非常适合用做三相/单相 BLDC/PMSM 的主控芯片。芯片采用了高性能的 32 位 ARM Cortex-M0 内核&#xff0c;QFN32封装。内置最大 64 Kbytes flash 和 8 Kbytes SRAM 存储器&#xff0c;最高48 MHz工作频率&#xff0c;多达 16 …

C++全栈聊天项目(21) 滚动聊天布局设计

滚动聊天布局设计 我们的聊天布局如下图 最外层的是一个chatview&#xff08;黑色&#xff09;&#xff0c; chatview内部在添加一个MainLayout&#xff08;蓝色&#xff09;&#xff0c;MainLayout内部添加一个scrollarea(红色)&#xff0c;scrollarea内部包含一个widget&…

ArcGIS for js 4.x FeatureLayer 加载、点选、高亮

安装arcgis for js 4.x 依赖&#xff1a; npm install arcgis/core 一、FeatureLayer 加载 代码如下&#xff1a; <template><view id"mapView"></view></template><script setup>import "arcgis/core/assets/esri/themes/li…

【区分vue2和vue3下的element UI ¶Rate 评分组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 和 Vue 3 的上下文中&#xff0c;Element UI 和 Element Plus&#xff08;Element UI 的 Vue 3 版本&#xff09;都提供了 el-rate 评分组件。然而&#xff0c;由于 Vue 3 和 Element Plus 的出现&#xff0c;API 和使用方式可能会有所不同。以下是对 Vue 2 的 Elemen…

Dify的Agent和DSPy:让AI更懂你

引言 在人工智能的世界里&#xff0c;大型语言模型&#xff08;LLM&#xff09;正变得越来越聪明&#xff0c;但要让它们真正为我们工作&#xff0c;我们还需要一些助手。Dify的Agent和DSPy就是这样的助手&#xff0c;它们帮助AI更懂我们的需求。今天&#xff0c;我们就用简单…

window.clearInterval(timer) 清除定时器

window.clearInterval(timer)是用来清除定时器的方法。在JavaScript中&#xff0c;使用定时器可以在指定的时间间隔执行一段代码。通常&#xff0c;使用setTimeout()方法可以在一定时间后执行一次代码&#xff0c;而使用setInterval()方法可以在每个时间间隔执行一次代码。 使…