vue路由传参--------params和query的区别

分手后的思念是犯贱 2021-11-05 03:24 423阅读 0赞

vue路由传参————params和query的区别

背景：项目中需要跨页面传值，如试题id,遇到了刷新后，传的值消失，所以研究了以下两者的区别

1.params只能用name来引入路由，query用path/name来引入

2.params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些。

3.取值用法类似分别是this.$route.params.name和this.$route.query.name。

4.params传值一刷新就没了，query传值刷新还存在

5.query地址栏中有参数信息 eg:http://localhost:8080/\#/spoc-eduManage/classManage/addStudent.html?id=274de6fe001f474b89d4ed89a9a71970

  1. this.$router.push({
  3. path:"/detail",
  5. params:{
  7. name:'nameValue',
  9. code:10011
  11. }
  13. });
  15. this.$router.push({
  17. path:'/xxx'
  19. query:{
  21. id:id
  23. }
  25. })

6.vue-router 利用url传递参数:

我们上面虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。

路由文件中这样写:

  1. {
  3. path:'/params/:id',
  5. component:Params
  7. }

这时候我们可以直接利用url传值了跳转:

方式1:params

方式2:编程式路由:

  1.  this.$router.push({
  3. path:'/xxx'
  5. params:{
  7. id:'198'
  9. }
  11. })

接收参数:

新闻ID：{ { $route.params.newsId}}

新闻标题：{ { $route.params.newsTitle}}

我们已经实现了以url方式进行传值，这在实际开发中经常使用，必须完全了解。我希望你看完视频后或者学完文章后能多练习两边，并在实际项目中充分使用。

发表评论

表情：
评论列表 （有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读