位置: IT常识 - 正文

vue中跳转到详情页的两种方法(vue带参数跳转到详情页面)

编辑:rootadmin
vue中跳转到详情页的两种方法 路由跳转过程中的参数传递

推荐整理分享vue中跳转到详情页的两种方法(vue带参数跳转到详情页面),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue点击跳转页面传参,vue带参数跳转到详情页面,vue中跳转详情页路由配置,vue项目页面跳转,vue跳转详情页,vue项目页面跳转,vue中跳转详情页路由配置,vue中跳转详情页路由配置,内容如对您有帮助,希望把文章链接给更多的朋友!

业务场景:在电影列表页面中点击某一项的点击名称,跳转到电影详情页,查看选中电影的详细信息。这个过程就需要在跳转的同时传递电影ID作为参数,这样,详情页才可以获取到选中项的ID,从而发送请求,查询详细信息。

1. 准备一个电影列表页:List.vue 一个电影详情页:Detail.vue 2. 配置路由: a. 当访问地址:http://localhost:8080/list时,看到列表页。 b. 当访问地址:http://localhost:8080/detail时,看到详情页。 3. 注意:需要在App.vue中添加占位符:

路由跳转过程中的参数传递方式1

通过在请求资源路径后用?拼接查询字符串的方式,传递参数:

<router-link to="/detail?id=7&name=zs">xx</router-link>方法一: 问号版vue中跳转到详情页的两种方法(vue带参数跳转到详情页面)

List.vue列表页: 列表项填入router-link标签

<template> <tbody> <tr v-for="(item, i) in data.result" :key="item.id"> <td> <router-link :to="`/detail?id=${item.id}`">//问号版的 {{item.title}}</router-link> </td> </tr> </tbody> </template>

detail.vue详情页:

<template> <div> <h2>电影详情页</h2> <p>电影名称:{{movieDate.title}}</p> <p>电影类型:{{movieData.type}}</p> </div> </template> <script> import myaxios from './http/MyAxios'export default{ data( ){ return{ movieData:{ },//绑定电影对象 } }, mounted( ){ //当前主键已经挂载到DOM上,(已展示)时被vue自动调用 console.log('生命周期方发mounted被调用') let id = this.$router.query.id //接收请求路径后的 ?key= value 格式的参数id console.log('接收到参数id:' + id) let url = "https://web.codeboy.com/bmdapi/movie-info/query" myaxios.get(url,{ id }).then(res =>{ console.log(res) //res.data.data中存储了电影对象{ } this.movieDate = res.data.data }) }};</script>方法二:不带问号版的<router-link to="/detail/7">xx</router-link>this.$router.push('/detail/7')

目标页如何接收该参数? 1、配置路由:

{path:'/detail/:id',component: ( ) => import 'Detail.vue'}

该路由的配置,将会匹配:

/detail/7 => id:7/detail/123 => id:123/detail/abc => id:abc

vue将会自动封装路径参数,放入this.$route.params属性中。如下即可获取该参数:

mounted(){ let id = this.$route.params.id}

List.vue列表页: 列表项填入router-link标签

<template> <tbody> <tr v-for="(item, i) in data.result" :key="item.id"> <td> <img :src="item.cover" width="60px"@click="$router.push(`/detail/${item.id}`)"> </td> </tr> </tbody></template>

router/index.js配置路由页:

{paht: '/detail/:id',name: 'detail',component: ( ) =>import ('../Detail.vue')}

detail.vue详情页:

<template><div><h2>电影详情页</h2><p>电影名称:{{movieDate.title}}</p><p>电影类型:{{movieData.type}}</p></div></template><script>import myaxios from './http/MyAxios' export default{data( ){return{movieData:{ },//绑定电影对象}},mounted( ){ //当前主键已经挂载到DOM上,(已展示)时被vue自动调用console.log('生命周期方发mounted被调用')let id = this.$router.params.id //接收路径参数: /detail/id 格式的参数idconsole.log('接收到参数id:' + id) let url = "https://web.codeboy.com/bmdapi/movie-info/query"myaxios.get(url,{ id }).then(res =>{console.log(res) //res.data.data中存储了电影对象{ }this.movieDate = res.data.data})}};</script>
本文链接地址:https://www.jiuchutong.com/zhishi/293122.html 转载请保留说明!

上一篇:怎么移除css的hover事件(css去掉项目符号)

下一篇:Access-Control-Expose-Headers 响应报头、跨域 公开响应头

  • 精美网页设计好一个网站页面后,需要前端开发人员将设计好的页面图片制作成网页

    精美网页设计好一个网站页面后,需要前端开发人员将设计好的页面图片制作成网页

  • 喜马拉雅ai文稿怎么开启(喜马拉雅AI文稿开启)

    喜马拉雅ai文稿怎么开启(喜马拉雅AI文稿开启)

  • opporeno7有无线充电功能吗(oppok7x无线充电)

    opporeno7有无线充电功能吗(oppok7x无线充电)

  • 华为p40是5g的全网通手机吗(华为p40全系5g)

    华为p40是5g的全网通手机吗(华为p40全系5g)

  • 快手回收站在哪里(快手如何找回收藏的视频)

    快手回收站在哪里(快手如何找回收藏的视频)

  • 快手怎么反名(快手反名教程)

    快手怎么反名(快手反名教程)

  • iphone7plus锁屏不推送微信怎么办(iphone7 锁屏)

    iphone7plus锁屏不推送微信怎么办(iphone7 锁屏)

  • OPPO手机如何恢复备份(oppo手机如何恢复删除的照片和视频)

    OPPO手机如何恢复备份(oppo手机如何恢复删除的照片和视频)

  • 10086怎么添加亲情号码(10086怎么添加亲情号码发什么)

    10086怎么添加亲情号码(10086怎么添加亲情号码发什么)

  • 怎么把横向文字变竖向(怎么把横向文字变竖向word)

    怎么把横向文字变竖向(怎么把横向文字变竖向word)

  • iwatch5屏幕什么材质(watch5的屏幕)

    iwatch5屏幕什么材质(watch5的屏幕)

  • qq水印怎么去掉(qq里的水印怎么去掉)

    qq水印怎么去掉(qq里的水印怎么去掉)

  • 小红书改名字怎么改不过来(小红书改名字怎么改不了)

    小红书改名字怎么改不过来(小红书改名字怎么改不了)

  • 华为nova7怎么截屏(华为Nova7怎么截图锁屏壁纸)

    华为nova7怎么截屏(华为Nova7怎么截图锁屏壁纸)

  • 微信健康通行码在哪里找(微信健康通行码怎么解绑)

    微信健康通行码在哪里找(微信健康通行码怎么解绑)

  • oppoa92s对比vivos6(oppo a92s和vivos6的对比)

    oppoa92s对比vivos6(oppo a92s和vivos6的对比)

  • 苹果11pro怎么投屏到电视机(苹果11pro怎么投屏搜索不到设备)

    苹果11pro怎么投屏到电视机(苹果11pro怎么投屏搜索不到设备)

  • 电脑长时间开机的危害(电脑长时间开机后自动关机)

    电脑长时间开机的危害(电脑长时间开机后自动关机)

  • 手机卡被锁定了怎么办(手机卡被锁定了还能解开吗)

    手机卡被锁定了怎么办(手机卡被锁定了还能解开吗)

  • 苹果手机显示lte什么意思(苹果手机显示LTE是卡贴机吗)

    苹果手机显示lte什么意思(苹果手机显示LTE是卡贴机吗)

  • 长方体的表面积公式(长方体的表面积和体积)

    长方体的表面积公式(长方体的表面积和体积)

  • 58怎么添加主叫号码(58怎么添加主号码)

    58怎么添加主叫号码(58怎么添加主号码)

  • 快手为什么关注不了别人(快手为什么关注的人突然没关注了)

    快手为什么关注不了别人(快手为什么关注的人突然没关注了)

  • 手机卡上的hd是什么(手机卡上的hd是啥意思)

    手机卡上的hd是什么(手机卡上的hd是啥意思)

  • 微信小程序获取用户头像昵称(微信小程序获取手机号)

    微信小程序获取用户头像昵称(微信小程序获取手机号)

  • 南极丹科岛附近的巴布亚企鹅 (© David Merron/Getty Images)(南极岛在哪)

    南极丹科岛附近的巴布亚企鹅 (© David Merron/Getty Images)(南极岛在哪)

  • 工资延期发放最多不能超过多少天
  • 不含税销售额计算公式理解
  • 其他权益工具投资借贷方向
  • 电子发票上的字体大小
  • 民办职业技能培训学校办学许可证
  • 租赁合同印花税计算
  • 政府补助收入计算有了新变化
  • 压覆矿产赔偿标准法律依据
  • 分公司和总公司的财务是分开的吗
  • 一般纳税人的含税收入怎么算
  • 发票作废 费用
  • 开出的发票什么情况下需要补税?
  • 增值税专用发票跨月退回怎么办?
  • 其他综合收益影响净利润吗
  • 本单位员工投稿怎么写
  • 报个税系统叫啥
  • 未开票的销售要交增值税吗
  • 违约金收税吗
  • 个人承包公司的经营所得怎么算
  • 跨市工程预交的税怎么算
  • 贷款利息支出属于
  • 小企业销售费用包括
  • mac更新系统版本
  • win11正式版发布
  • 怎样将u盘制作成电脑系统启动盘?
  • php如何使用session
  • 建筑工程简易计税可以抵扣吗
  • 住房公积金余额查询
  • 计提本月应交未交增值税
  • 水煮鱼的做法和步骤 家常
  • inputtypefile 文件名
  • 请问简单的
  • 土地增值税属于财产税吗
  • 销售退回的增值税怎么处理
  • 基于Laravel5.4实现多字段登录功能方法示例
  • php判断useragent
  • c#创建web
  • 机器学习分类算法之XGBoost(集成学习算法)
  • 政府性基金账务处理
  • mysql使用ssl连接
  • 帝国cms如何做网站
  • 企业捐款给公益组织
  • 个税哪种申报不用交个税的
  • 计提坏账准备和确认坏账损失
  • 通过法院拍卖取得的房屋需要法院下确认裁定吗
  • 金蝶新建账套如何录入固定资产账套
  • 不用交社保的几种情况
  • 收到采购材料发票款未付会计分录
  • 营改增后增加了什么征税项目
  • 存货过期处理怎么做分录
  • 购买展示样品是指什么
  • 合伙企业分红怎么做账
  • 商贸公司的外账怎么做
  • 合同权利义务包含债务吗
  • 销售单位收入和税收
  • 航天金税服务费不交会怎样
  • 购买原材料材料尚未验收入库,款项尚未支付
  • 对于事业单位无力支付的银行承兑汇票
  • 财务顾问费可以税前扣除吗
  • windows7快速截图
  • windows 10 周年更新
  • xwizard.exe是什么
  • WIN7系统如何禁止特定软件在线升级
  • macbookpro如何语音输入
  • win8的ie浏览器
  • freebsd服务器怎么样
  • Linux 压缩某个文件夹的实现方法
  • texturepackergui
  • 如何使用jquery插件
  • python函数例子
  • kmp算法代码完整实现
  • 一起学ap
  • javascript教程完整版
  • Python连接MySQL并使用fetchall()方法过滤特殊字符
  • python os.walk遍历目录
  • JavaScript中void(0)的具体含义解释
  • 2023年四川城乡居民养老保险多少钱
  • 地税局下属单位
  • 国税总局编制这次怎么调整
  • 乌鲁木齐市公立幼儿园有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设