列表进入详情页的传参问题(vue的问题)

这篇具有很好参考价值的文章主要介绍了列表进入详情页的传参问题(vue的问题)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link>

c页面的路径为http://localhost:8080/#/detail?id=1,可以看到传了一个参数id=1,并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据,获取id的方式是this.$route.query.id

vue传参方式有:query、params+动态路由传参。

说下两者的区别:

1.query通过path切换路由,params通过name切换路由

// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

2.query通过this.$route.query来接收参数,params通过this.$route.params来接收参数。

// query通过this.$route.query接收参数
created () {
    const id = this.$route.query.id;
}

// params通过this.$route.params来接收参数
created () {
    const id = this.$route.params.id;
}

3.query传参的url展现方式:/detail?id=1&user=123&identity=1&更多参数

params+动态路由的url方式:/detail/123

4.params动态路由传参,一定要在路由中定义参数,然后在路由跳转的时候必须要加上参数,否则就是空白页面:

{      
    path: '/detail/:id',      
    name: 'Detail',      
    component: Detail    
},

注意,params传参时,如果没有在路由中定义参数,也是可以传过去的,同时也能接收到,但是一旦刷新页面,这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的,因为你总不可能要求用户不能刷新页面吧。例如:文章来源地址https://www.toymoban.com/news/detail-803518.html

// 定义的路由中,只定义一个id参数
{
    path: 'detail/:id',
    name: 'Detail',
    components: Detail
}

// template中的路由传参,
// 传了一个id参数和一个token参数
// id是在路由中已经定义的参数,而token没有定义
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>

// 在详情页接收
created () {
    // 以下都可以正常获取到
    // 但是页面刷新后,id依然可以获取,而token此时就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}

到了这里,关于列表进入详情页的传参问题(vue的问题)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Postman传递@requestbody标注的List集合的传参遇到的问题

    我们想测试如下接口 这里对应了三个传入参数,因为deviceList是必须的,Device作为我们自己封装的JavaBean,我们想要直接传参的话,前端传递一个List过来,这个是被@Requestbody修饰的,同时还存在两个由@RequestParam修饰的包装类,因此, @RequestBody主要用来接收前端传递给后端的

    2024年02月16日
    浏览(38)
  • axios的传参方式

    目录 1、data传参 2、使用 params 传递查询参数: 3、使用路径参数传递数据: 在使用 Axios 发送 HTTP 请求时,有三种常见的传参方式: data 、 params 和路径参数 1、data传参 2、使用  params  传递查询参数: params 参数通常用于GET请求中添加查询参数,而对于POST请求,一般使用

    2024年01月18日
    浏览(63)
  • 微信小程序组件的传参

     # 父子关系      1.父向子传参     // 子组件:通过 properties 声明要从父组件中接收的数据     //    组件的属性列表     properties:{         tabId:String     }     // 父组件:通过自定义属性的形式传递数据。以子组件中定义的 key 为属性名,以要传递的数据为属性值     li

    2024年02月10日
    浏览(44)
  • vue列表跳转详情,记录列表滚动不变

    记录主元素 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created- mounted- activated,退出时触发deactivated。 当再次进入(前进或者后退)时,只触发activated。

    2024年02月07日
    浏览(52)
  • 织梦DEDE会员空间文章列表无法分页的问题的解决

    织梦内容管理系统(dedecms) 以简单、实用、开源而闻名,是国内最知名的PHP开源网站管理系统,也是使用用户最多的PHP类CMS系统,在经历多年的发展,目前的版本无论在功能,还是在易用性方面,都有了长足的发展和进步,DeDecms免费版的主要目标用户锁定在个人站长,功能更

    2024年02月02日
    浏览(43)
  • Django_获取api接口的传参

    目录 当参数为form-data 或者x-www-form-urlencoded类型时,使用request.POST获取到参数 当参数为raw类型时,使用request.body获取到参数,获取的参数需要经过处理才能使用 源码等资料获取方法 获取参数方式  获取参数方式   各位想获取源码的朋友请 点赞 + 评论 + 收藏 ,三连! 三连

    2024年02月15日
    浏览(46)
  • 前端vue中父子组件之间的传值(修改值)和事件的相互调用

    目录 父组件向子组件传值 子组件修改父组件中的值: 方法1 方法2 子组件调用父组件里的函数 方法1 方法2 父组件调用子组件的函数 : 子组件中的 data 属性是用来存储子组件自身的数据,而不是用来接收父组件传递的数据的。父组件向子组件传递数据的常用方式是通过 pro

    2024年02月07日
    浏览(58)
  • uniapp 实现tabBar-switchTab之间的传参

    tabbar之间跳转页面时,需要传递一个参数。 官方文档明确说明: 跳转tabBar栏的页面只能使用 uni.switchTab 并且url 路径后面不能传递参数。 方法1:setStorageSync(本地缓存) //index.vue 页 //user.vue 页(在onShow中从本地缓存中获取出来,进行相关操作) 方法2:使用全局变量: main.js 定义

    2024年01月21日
    浏览(45)
  • 【小程序】uni-app 页面的传参和接参

    值得一提的是小程序只能使用字符串的方式进行传递,不像vue的路由传参。至于为什么要这样,这就需要看文档怎么说了。 注意:传递参数只能以 ?key=valuekey=value 方式传递 使用 onLoad() 钩子函数来接收 小程序只能以 字符串的方式进行传递和接收,那么复杂类型对象和数组怎

    2024年02月02日
    浏览(55)
  • R语言【技巧】——判断自定义函数的传参内容是否符合要求

    比如 对一个应该传入 数值型 ,数值为 0 或 1 的参数: 比如 对一个应该传入 字符型 ,字符串为 某个向量元素之一 的参数,类似于选项框:

    2024年01月23日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包