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中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
详解JavaScript的变量
Apr 04 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
js实现磁性吸附的示例
Oct 26 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
python的多重继承的理解
2017/08/06 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
python3中的md5加密实例
2018/05/29 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python如何生成网页验证码
2018/07/28 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
几个Shell Script面试题
2012/08/31 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
简历自荐信范文
2015/03/09 职场文书
个人简历求职信范文
2015/03/20 职场文书
表彰大会新闻稿
2015/07/17 职场文书
企业财务管理制度范本
2015/08/04 职场文书