vue点击列表传参进入详情页

47 篇文章 3 订阅
  1. 在列表页文件的methods方法中写跳转代码
  methods: {
    handleWatch (row) {
      // console.log(row.activeJobId)
      this.$router.push({path: 'gd_detail/', query: {id: row.activeJobId}})
    }

2.在详情页文件的methods方法中获取参数

    init () {
      this.id = this.$route.query.id
      console.log(this.id)
      // 获取详情数据
      getGdDetail({activeJobId: this.id})
        .then(res => {
          console.log(res)
          this.personInfo = res.query_result.serv_name
        })
    }
  • 3
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue 3中,可以使用两种方式进行路由传参:query参数和params参数。 1. 使用query参数进行路由传参。在A页中,可以使用`<router-link>`标签传递参数,将参数作为query的一部分传递给B页。例如: ``` <router-link :to="{ path: '/detail', query: { id: '1001' } }">到详情页</router-link> ``` 在B页中,可以使用`useRoute`方法从路由对象中获取参数。例如: ``` import { useRoute } from 'vue-router' const route = useRoute() console.log('route:', route.query.id) ``` 2. 使用params参数进行路由传参。在A页中,可以使用`<router-link>`标签传递参数,将参数作为params的一部分传递给B页。例如: ``` <router-link :to="{ name: 'detail', params: { id: '1001' } }">到详情页</router-link> ``` 在B页中,同样可以使用`useRoute`方法从路由对象中获取参数。例如: ``` import { useRoute } from 'vue-router' const route = useRoute() console.log('route:', route.params.id) ``` 需要注意的是,在路由配置文件(通常是index.js)中,需要将路由路径配置为动态路径。例如: ``` path: '/detail/:id' ``` 这样,就可以在Vue 3中使用query参数或params参数进行路由传参了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue路由传参 vue路由传参](https://download.csdn.net/download/weixin_39709920/87065136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue3路由及传参](https://blog.csdn.net/leveretz/article/details/127765076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值