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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
javascript编写简易计算器
May 06 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 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里得到前天和昨天的日期的代码
2007/08/16 PHP
php写的AES加密解密类分享
2014/06/20 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python操作MySQL数据库的方法
2018/06/20 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python向图片里添加文字
2019/11/26 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
什么是Python包的循环导入
2020/09/08 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
优秀大学生的自我评价
2014/01/16 职场文书
财务科科长岗位职责
2014/03/10 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL