vue 路由传参 params 与 query两种方式的区别

2024-05-12 14:21:53

vue 路由传参 params 与 query两种方式的区别

　　初学vue的时候，不知道如何在方法中跳转界面并传参，百度过后，了解到两种方式，params 与 query。然后，错误就这么来了：

　　 router文件下index.js里面，是这么定义路由的：

{path:"/detail",      name:"detail",component:home}

　　我想用params来传参，是这么写的，嗯~

this.$router.push({
path:"/detail",
params:{
name:'nameValue',
code:10011
}
});

　　结果可想而知，接收参数的时候：

this.$route.params.code     //undefined

　　这是因为，params只能用name来引入路由，下面是正确的写法：

this.$router.push({name:"detail",params:{name:'nameValue',code:10011}
});

这回就对了，可以直接拿到传递过来的参数nameValue了。

说完了我的犯傻，下面整理一下这两者的差别：

1、用法上的

　　刚才已经说了，query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router了哦！！

2、展示上的

　　query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

query:

params:

总结：刚学vue的时候，由于没有认真细致的看文档，导致在很多细小的坑里爬不上来，后来自己慢慢的走上正轨的时候，再去看文档，看到了很多原本可以避免的坑，想插死自己的心都有了！！

加油爬坑，共勉

转载于:https://www.cnblogs.com/hjptopshow/p/9202966.html

vue 路由传参 params 与 query两种方式的区别相关推荐

vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
vue路由传参—params—query
1.Params的方式类似于get请求,传递的数据会在浏览器地址显示 Params路由传参分为三步: 1.绑定参数在你传参的路由绑定参数 2.发送数据 3.接收参数在路由页面用this.$rou ...
同一路由带参刷新，以及params和query两种方式传参的异同
同一路由应该不叫跳转了吧,就先叫刷新好了. 需求及问题今天做web课设有这样一个需求: 在导航栏中一项叫做教师队伍一级菜单下,有三个二级菜单,分别为教授.副教授.讲师.这三个二级菜单分别对应一个页面 ...
vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
vue路由传参 params传参不能传对象
不能传对象,传对象的时候,刷新完数据会丢失传递的是一个对象但是: 跳转以后,刷新页面,数据会丢失,所以说不能传对象,会有问题
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
vue路由传参的两种方式
项目场景: 例如:点击table表格第一列进入详情页,这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用跳转方式一般我们有两种方式让路由携带参数 1.路由传参query(path是路由地 ...

最新文章

热门文章