路由传参点击查询携带多个参数跳转到另一个页面 query传参

我的天呐!!!

已于 2022-12-02 18:50:41 修改

阅读量319

点赞数

文章标签：前端 javascript 开发语言

于 2022-12-02 18:41:34 首次发布

本文链接：https://blog.csdn.net/xzbqd/article/details/128152751

版权

前言：

上次写了params传参这次query传参

1.点击toUserTaxDetails事件后路由跳转且传参数

// 查询用户个税明细
   toUserTaxDetails(userId) {
     this.$router.push({
       path: '/monthTax/userTaxDetails',
       query: {
         taxSalaryUserId: userId,
         taxMonth: this.searchForm.taxMonth
       }
     })

2.在对应userTaxDetails路由页面的crated生命周期中接收相关参数

 created() {
    // 查询指定用户个税信息
    this.searchForm.taxSalaryUserId = this.$route.query.taxSalaryUserId || ''
    this.searchForm.taxMonth = this.$route.query.taxMonth || '' 
  },

3.路由相关

 //个税信息
  {
    path: '/monthTax',
    component: Layout,
    name: 'monthTax',
    redirect: '/monthTax/index',
    meta: {
      title: '个税信息',
      icon: 'monthtax',
    },
    children: [{
      path: 'index',
      component: () => import('@/views/monthtax/index'),
      name: 'monthTax',
      meta: {
        title: '员工个税明细',
      }
    },
     {
      path: 'userTaxDetails',
      component: () => import('@/views/monthtax/userTaxDetails'),
      name: 'userTaxDetails',
      meta: {
        title: '个税明细',
        hidden: true
      }      
    }, 
   ]
  },