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

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

this.$router.push({

path:"/detail",

params:{

name:'nameValue',

code:10011

}

});

this.$router.push({

path:'/xxx'

query:{

id:id

}

})

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

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

路由文件中这样写:

{

path:'/params/:id',

component:Params

}

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

方式1:<router-link to="/params/198">params</router-link>

方式2:编程式路由:

 this.$router.push({

path:'/xxx'

params:{

id:'198'

}

})

接收参数:

<p>新闻ID：{{ $route.params.newsId}}</p>

<p>新闻标题：{{ $route.params.newsTitle}}</p>

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