Vue 列表页带参数进详情页的操作(router-link)

 更新时间:2020年11月13日 11:44:17   作者:Charis-Cai  
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

首先,仔细看文档!!!一点一点的踩坑过来的~~~

这里介绍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实现卡片遮罩层交互式功能

    vue实现卡片遮罩层交互式功能

    在前端开发中,卡片遮罩层是一种常见的交互设计元素,用于强调某个区域或内容,并提供用户操作的入口,本文将带大家在 vue 中结合实际案例实现此功能,感兴趣的朋友一起看看吧
    2024-08-08
  • Vue项目配置在局域网下访问方式

    Vue项目配置在局域网下访问方式

    这篇文章主要介绍了Vue项目配置在局域网下访问方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 深入探究Vue2响应式原理的实现及存在的缺陷

    深入探究Vue2响应式原理的实现及存在的缺陷

    Vue的响应式数据机制是其核心特性之一,它能够自动追踪数据的变化,并实时更新相关的视图,然而,Vue2中的响应式数据机制并非完美无缺,本文将探讨Vue2响应式原理及其存在的缺陷
    2023-08-08
  • 如何使用vue实现跨域访问第三方http请求

    如何使用vue实现跨域访问第三方http请求

    这篇文章主要介绍了如何使用vue实现跨域访问第三方http请求,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • vue如何在自定义组件中使用v-model

    vue如何在自定义组件中使用v-model

    本篇文章主要介绍了vue如何在自定义组件中使用v-model,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue press 支持图片放大功能的实例代码

    Vue press 支持图片放大功能的实例代码

    这篇文章主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

    Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

    这篇文章主要介绍了Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果,通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue项目打包之后接口出现错误的问题及解决

    vue项目打包之后接口出现错误的问题及解决

    这篇文章主要介绍了vue项目打包之后接口出现错误的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • van-uploader保存文件到后端回显后端接口返回的数据

    van-uploader保存文件到后端回显后端接口返回的数据

    前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 前端vue实现甘特图功能

    前端vue实现甘特图功能

    dhtmlxGantt是一个强大的JavaScript Gantt图表库,提供易于使用、高度可自定义的Gantt图表组件,它支持多项任务和进度条,以及多种列和行布局,可用于创建各种类型的时间线和计划表,本文给大家介绍前端vue实现甘特图的相关知识,感兴趣的朋友跟随小编一起看看吧
    2024-04-04

最新评论