Vue 列表页带参数进详情页的操作(router-link)


Posted in Javascript onNovember 13, 2020

首先,仔细看文档!!!一点一点的踩坑过来的~~~

这里介绍params和query两种方法

1.用params传参

列表页:

<router-link :to="{ name:'msgDetail', params: {id: item.msg_id} }">(注意:用params传参这里是命名路由,用name)

</router-link>

路由配置如下:

export default new Router({
routes: [
 {
 path: '/msgDetail/:id',
 name: 'msgDetail',
 component: msgDetail
 }
]

详情页接收参数:

this.$route.params.id(注意:这里是$route,而不是$router)

2.用query传参

列表组件:

<router-link :to="{ path: '/msgDetail', query: {id: item.msg_id} }">(注意:用query传参这里是带查询参数,用path)

</router-link>

路由配置如下:

export default new Router({
routes: [
 {
 path: '/msgDetail',
 name: 'msgDetail',
 component: msgDetail
 }
]

详情页接收参数:

this.$route.query.id(注意:这里是$route,而不是$router)

补充知识:vue+element解决点击table列表的从详情或修改页面跳转路由到列表页总是跳转到第一页,而不能跳转到当前页的问题

思路:

将当前页的页码currentPage存入session,然后点击详情跳转到详情页面,然后,再次返回当前页的时候,在created生命周期里,获取到存储的currentPage,再进行加载

Vue 列表页带参数进详情页的操作(router-link)

Vue 列表页带参数进详情页的操作(router-link)

Vue 列表页带参数进详情页的操作(router-link)

Vue 列表页带参数进详情页的操作(router-link)

Vue 列表页带参数进详情页的操作(router-link)

Vue 列表页带参数进详情页的操作(router-link)

Vue 列表页带参数进详情页的操作(router-link)

Vue 列表页带参数进详情页的操作(router-link)

Vue 列表页带参数进详情页的操作(router-link)

以上这篇Vue 列表页带参数进详情页的操作(router-link)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js+Flash实现访问剪切板操作
Nov 20 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 #Javascript
PHP 502bad gateway原因及解决方案
Nov 13 #Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 #Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 #Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 #Javascript
You might like
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python通过future处理并发问题
2017/10/17 Python
python 中如何获取列表的索引
2019/07/02 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Django实现随机图形验证码的示例
2020/10/15 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
英语感恩演讲稿
2014/01/14 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
爱护环境建议书
2015/09/14 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
HttpClient实现文件上传功能
2022/08/14 Java/Android