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之解决IE下不渲染的bug
Jun 29 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
详解Vue单元测试case写法
May 24 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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
模仿OSO的论坛(三)
2006/10/09 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python 私有函数的实例详解
2017/09/11 Python
Python实现Linux监控的方法
2019/05/16 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
学校教学工作总结2015
2015/05/19 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
JS中如何优雅的使用async await详解
2021/10/05 Javascript