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 Timing
Apr 21 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
原生js 实现表单验证功能
Feb 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
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
基于Python List的赋值方法
2018/06/23 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python实现日志按天分割
2019/07/22 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
C面试题
2015/10/08 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
美容师的职业规划书
2013/12/27 职场文书
运动会演讲稿50字
2014/08/25 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL