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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
图解js图片轮播效果
Dec 20 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
jQuery操作css样式
May 15 jQuery
js实现数字滚动特效
Dec 16 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 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
基于mysql的论坛(4)
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python 线程池用法简单示例
2019/10/02 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
应届生.NET方向面试题
2015/05/23 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
大学毕业自我评价
2014/02/02 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
合作协议书格式
2014/08/19 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
入党群众意见范文
2015/06/02 职场文书
高温慰问简报
2015/07/21 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
JS 基本概念详细介绍
2021/10/16 Javascript