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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
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中的实现trim函数代码
2007/03/19 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python 专题四 文件基础知识
2017/03/20 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
法学专业个人求职信
2013/09/26 职场文书
读书小明星事迹材料
2014/05/03 职场文书
演讲比赛策划方案
2014/06/11 职场文书
城市创卫标语
2014/06/17 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
体育教师个人总结
2015/02/09 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书