前端实现文章列表和文章详情之间传参数跳转到对应页面

最新推荐文章于 2024-04-04 14:35:10 发布
最新推荐文章于 2024-04-04 14:35:10 发布
阅读量1.2k 收藏 18
点赞数 2
文章标签： vue.js 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44227395/article/details/103664535
版权

文章详情页面复用，通过传Id参数，实现文章列表到文章详情页面的跳转，不同的页面跳转的详情页面内容也不同。
思路：id作为参数，需要先在列表页面传出参数，再在详情页面通过接口获取id,才可与获取到列表文章的内容。
1、在列表页面传参数，定义点击事件，点击列表是，触发事件，传出参数。
在这里插入图片描述
点击事件：newsClick
传参数语句写在点击方法中
在这里插入图片描述
2、在详情页面，获取传过来的参数id，同样写在方法中
在这里插入图片描述
在详情页面定义一个本地id来接受传过来的参数id，并且与接口对接,
this.id=this.$route.query.id路由传参

这样就可以两个页面之间跳转带参数id跳转,实现页面复用

程序鲤
关注
uni-app实战之社区交友APP（17）账号模块和文章列表实现
CUFEECR的博客
03-20 692
我的页面通过Vuex修改登录状态和保存用户信息到缓存；实现手机号验证码和用户名密码登录两种方式；启动APP时初始化用户登录状态来保持登录状态；退出登录需要修改登录状态、清除登录信息，并调整显示内容；第三方登录包括微信、QQ和微博登录，使用uni.login接口实现。搭建修改账号与安全页面；新建页面实现绑定手机功能；实现修改密码交互；实现绑定邮箱功能；实现第三方账号的绑定与登录。修改头像需要上传图片；实现修改用户信息功能。在文章列表和详情页面实现关注；获取用户交互数据；在文章列表和详情页面实现顶踩功能。
uni-app实战之社区交友APP（16）模块封装、文章和话题功能实现
CUFEECR的博客
03-13 1432
Vuex是Vue全局变量和方法的管理器，uni-app内置，可以定义state和mutations；点赞评论等操作需要验证权限；将接口请求模块进行封装、简化代码。首页交互需要获取文章分类、所有分类下的文章、上拉加载更多、避免重复加载；封装请求错误处理逻辑；格式化显示文章时间。实现文章详情页交互；分享支持微信、QQ、微博或者微信朋友圈；搜索文章需要实现加载拉刷新和缓存搜索历史。话题页涉及的接口包括话题分类、轮播图和热门话题列表；实现话题分类交互和加载更多；话题详情页包括话题信息和文章列表；实现搜索话题。
js实现『加载更多』功能实例 & 点击列表跳转到详情页（tap）
Yanfengting的博客
12-27 2020
h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。 解析：https://www.cnblogs.com/52fhy/p/5405541.html 示例：http://me.52fhy.com/demo/loadmore/index.html 基于按钮实现 最简单的就是给一个加载更多的按钮，如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了...
【前端】列表页点进某个详情页，详情页可按顺序跳转到上一条/下一条的实现思路（2种）
coderYYY的博客
01-16 2156
列表页展示列表，点击某个列表可以跳转到对应的详情页，点击上一页下一页可以按列表顺序跳转到对应详情页。比如点击列表2进入到详情2，我点上一页可以跳转到详情1，点击下一页可以跳转到详情3。难点：详情页如何按顺序切换一开始我是从网上搜索答案，发现关于这部分的答案很少，所以自己思考了一下，总结了两个方案出来，有其他方法的可以评论区分享。
23.实现详情页面功能跳转
zhuhui2000的博客
06-11 743
1.我们在list文件中，我们引入模块react-router-dom，实现页面跳转 2.使用Link进行跳转操作 3.点击简书怎么回到首页 我们在header文件下的style中，将a换成div 然后我们在header目录下的index文件中，我们使用Link实现跳转 3.引入Link 4.这时候会有一个报错 5.我们需要在APP.js文件中，把Header放在BrowserRouter下面...
实现页面跳转的方法
weixin_小白鼠的博客
05-26 2791
实现页面跳转的方法 1 前端路由（真实跳转） router-view 主要用来构建单页面应用， 使用url中的hash来匹配路由地址，根据匹配到不同的路由，显示不同页面（组件） 可以有多个子路由 router-link 跳转到About 点击了页面中 ”跳转到about“这几个字后，就会跳转到 to 对应的路由地址 “/about” router.push() 或者 router.replace() 2 对话框（假跳转） 通过对话框实现跳转效果的话，需要将对话框布满整个屏幕，遮住原来页面，达到假跳转 可以
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
1_bit 的博客
05-24 4596
一、详情页制作 在之前的章节中，我们已经制作完毕了登录、注册、首页等内容，在这一节中，我们编写详情页以及详情页功能制作。 详情页页面如下： 详情页头部也就是一个头部栏，下面是一个行，里面有标题和点赞信息内容，往下是一个富文本显示区域，再往下为评论内容区，接着还有一个评论内容显示区域： 首先我们创建头部，头部跟其他页面的头部一致，不再赘述创建方法，页面组件如下： 接着是标题区域，标题文本所占80%，点赞数据文本占 20%： 此时页面如下： 接下来就是博文内容区域，我们创建一个博文内容行，高度设置为
[经典案例]使用Vue-cli实现路由间的跳转与调用接口完成前端页面数据的渲染与显示-文章列表项目
qq_43055855的博客
10-21 1807
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
前端页面跳转测试
测试架构师养成记的博客
09-15 9879
前端页面跳转测试 前端页面跳转分析处于什么环境 对于测试人员来说，在进行交互评审的时候，就可以开始基于交互文档以及接口文档进行页面跳转的分析了。 注意：全篇的前端包含APP、H5以及中间的接口路由层。 如何做页面跳转分析 设计分析 1、交互层面的分析 协议分析 1、协议层面的分析 通用分析 1、跳转页面的类型 2、页面跳转的交互范围 3、页面跳转通用测试方法 ...
移动端页面与PC页面之间的跳转
qq_22884935的博客
10-12 910
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
前端路由跳转和传参的几种方式
m0_72167535的博客
11-19 3490
前端路由跳转和传参的几种方式
uni-app系列：页面跳转以及传递参数，腾讯最爱考的前端面试题
最新发布
2401_84097996的博客
04-04 2140
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。，可以扫码获取！！（备注：前端）**[外链图片转存中…(img-4BghtmPW-1712212465956)][外链图片转存中…(img-rwVXlBin-1712212465956)]资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
#前端# 点击列表页跳转到对应的详情页（获取上一页的参数/id）
ZHENGCHUNJUN的博客
10-26 7086
#前端# 点击列表页跳转到对应的详情页 （获取上一页的参数/id） 示例： 从列表页跳转到详情页 效果图： 思路： 在列表页面： （1）首先通过后端接口数据，将列表页的内容进行循环渲染出来 （2）再通过绑定点击事件，在事件里面传入id实参（就是后端返回的数据id） 示例： <view v-for="(item, index) in reportList" @click="toDetail(item.id)" > （3）再在method里面的getDeta...
关于列表页点击跳转详情页传数据的问题/大佬勿喷。如果问题请指出在下方评论，感谢！...
wkx8324183的博客
06-19 437
今天写了一个列表页进入详情页的小测试。来看下图片及代码 　　 这是他的详情页 有点low 首先你先要获取到id值 这就算是传id成功了然后在你点击跳转到详情页后 ...
html页面跳转传递参数
u011927449的博客
08-15 960
效果如下： a页面 点击跳转按钮后 在b页面可以获取到对应的值。 代码如下： a页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.params.js"></sc..
列表进入详情页传参问题
han_0111的博客
03-27 294
列表进入详情页传参问题 例如图书列表进入图书的详情页面，需要传递一个唯一的id值。 <router-link :to="{path: 'detail', query: {id: 2}}">前往detail页面</router-link> c页面的路径为http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据，获取id的方式是this.$route.query.i
页面跳转多种方法（加传参）
weixin_39037804的博客
10-31 1921
onclick="javascript:location.href='/HelpCenter/HelpCenter/'" <a href="/HelpCenter/HelpCenter">帮助中心...
前端项目实战30-多加一个列表表示详情
qq_41632427的博客
10-08 94
前端
Vue界面跳转传递参数
m0_62990162的博客
11-02 4309
Vue.js与WordPress REST API：构建交互式文章列表与详情应用
2. **文章详情页**：当用户点击“查看详情”时，会跳转到文章详情页面，展示文章的详细内容，这需要根据文章ID从API获取特定文章的信息，并在对应的article.vue组件中渲染。 3. **分页功能**：为了优化用户体验，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值