vue-router路由传参之query和params
首先简单来说明一下$router和$route的区别
//$router : 是路由操作对象,只写对象
//$route : 路由信息对象,只读对象
//操作 路由跳转
this.$router.push({
name:'hello',
params:{
name:'word',
age:''
}
})
//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;
1·query传递参数
我看了很多人都说query传参要用path来引入,params传参要用name来引入,只是我测试了一下,query使用name来引入也可以传参,使用path也可以。如果有人知道原因可以告诉我一下,谢谢!
//query传参,使用name跳转
this.$router.push({
name:'second',
query: {
queryId:'',
queryName: 'query'
}
})
//query传参,使用path跳转
this.$router.push({
path:'second',
query: {
queryId:'',
queryName: 'query'
}
})
//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;
最终不管是path引入还是name引入效果都一样如下图
2·params传递参数
注:使用params传参只能使用name进行引入
使用params传参
//params传参 使用name
this.$router.push({
name:'second',
params: {
id:'',
name: 'query'
}
})
//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
//路由
{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}
效果如下图
需要注意的是:
params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。
params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。
如果路由后面没有 /:id/:name效果如下图,地址栏没有参数
但是如果你刷新一下,就会发现页面失败,效果如下图
因此我们不可能让用户不要刷新,所以我们必须在路由后面加上 /:id/:name
如果使用path进行传参
//params传参 使用path
this.$router.push({
path:'second',
params: {
id:'',
name: 'query'
}
})
//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
3.总结
传参可以使用params和query两种方式。
使用params传参只能用name来引入路由,即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!。
使用query传参使用path来引入路由。
params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。
二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示。
【参考文章】
今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别。
直接总结干货!!!
1.query方式传参和接收参数
传参:
this.$router.push({
path:'/xxx',
query:{
id:id
}
}) 接收参数:
this.$route.query.id
注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!
this.$router 和this.$route有何区别?
在控制台打印两者可以很明显的看出两者的一些区别:
- 1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
- 2.$route为当前router跳转对象,里面可以获取name、path、query、params等
2.params方式传参和接收参数
传参:
this.$router.push({
name:'xxx',
params:{
id:id
}
}) 接收参数:
this.$route.params.id
注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!
另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示
.
vue-router路由传参之query和params的更多相关文章
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- 18 vue 动态路由传参
params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- vue里面路由传参的三种方式
1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...
- vue之路由传参三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...
- vue中路由传参的方式
一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- vue $router.push 传参的问题
$router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...
随机推荐
- python 异常try/except语句
异常模式的写法 try: 执行正常的模块 except X: 执行异常X的代码 except: 其他的异常执行模块except 必须在except X之后 else: 没有异常,则会执行完try,而后 ...
- 【Eureka篇三】Eureka常用配置说明(7)
服务注册中心配置(Bean类:org.springframework.cloud.netflix.eureka.server.EurekaServerConfigBean) #关闭注册中心的保护机制, ...
- luoguP4585 [FJOI2015]火星商店问题
题意 显然商店编号的限制能用可持久化trie解决. 特殊的商品预先判掉就好了,现在只考虑普通的商品. 发现商品的时间是单点,询问时一段时间,于是将询问区间在线段树上拆成\(log\)个区间,分别放上该 ...
- 2019 SDN上机第四次作业
2019 SDN上机第4次作业 1. 解压安装OpenDayLight控制器(本次实验统一使用Beryllium版本) 修改环境变量 2. 启动并安装插件 3. 用Python脚本搭建如下拓扑,连接O ...
- vs code 中配置git go
{ "window.zoomLevel": 1, "editor.fontSize": 15, //"files.autoSave": &q ...
- nginx 一键安装
#!/bin/bash1. 关闭防火墙 和 selinux service iptables stopsetenforce 0 2. 判断是否有nginx服务netstat -ntlp |grep n ...
- 【day02】Xhtml
一.HTML实体(HTML Entites) 1.HTML实体:W3C规定在浏览器看到的特殊符号必须用HTML实体 单引号(') ===== ' 双引号(") ===== " ...
- 05-01 seaborn
1.Seaborn 在上节中我们学习了matplotlib,这节课我们来看看另一个可视化的模块seaborn,它是基于matplotlib的更高级的开源库,主要用作于数据可视化,解决了matplotl ...
- QFile 打开文件,不用先判断文件名是否为空,做这多余的工作
void test_file() { QFile file(""); if (!file.open(QIODevice::WriteOnly)){ qDebug()<< ...
- 修改kile工程名字(转)
假设原来的工程文件名是first,要改成second1.在工程文件目录中,将first.uvopt和first.uvproj名字改成second.uvopt和second.uvproj.2.其他fir ...