VUE路由传参

最新推荐文章于 2025-08-05 15:21:50 发布

原创最新推荐文章于 2025-08-05 15:21:50 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架 #vue.js

两种传参：query(展示在地址上)，params(不展示在网站地址上)

params形式传参：需要指定某个页面的Name（必须指定否则获取不到），

//页面名称
export default {
  name: "IndustryUnitsIndex",
}

//通过$router 实现跳转
this.$router.push({
  name: "IndustryUnitsIndex",
  params:{
    queryParam4: JSON.stringify(this.queryParams) //传递一个对象
  }
});

//获取参数 注意使用 params this.$route.params
 let a = JSON.parse(this.$route.params.queryParam4)

query 传参：

//页面名称 可以指定名称用 name 跳转，也可以用puth 路由地址来跳转
export default {
  name: "IndustryUnitsIndex",
}

//通过name 实现跳转
this.$router.push({
  name: "IndustryUnitsIndex",
  query: { id: row.baseId, title: row.detailName, activeMenu: '/basicUnitDirectory/directoryManage/baseUnits' },
  params:{
    queryParam4: JSON.stringify(this.queryParams)
  }
});

//通过puth 实现跳转 puth 不支持 params 传参
this.$router.push({
  puth: "/basicUnitDirectory/directoryManage/IndustryUnitsIndex",
  query: { id: row.baseId, title: row.detailName, activeMenu: '/basicUnitDirectory/directoryManage/baseUnits' }
});

//获取参数 注意使用 params this.$route.params
 let a = JSON.parse(this.$route.params.queryParam4)

//获取参数 注意使用 query this.$route.query 获取query 中的参数
 let id = this.$route.query.id
 let title = this.$route.query.title