首先简单来说明一下$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的更多相关文章

  1. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  2. Vue的Router路由传参

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  3. 18 vue 动态路由传参

    params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...

  4. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  5. vue里面路由传参的三种方式

    1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...

  6. vue之路由传参三种基本方式

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...

  7. vue中路由传参的方式

    一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...

  8. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  9. vue $router.push 传参的问题

    $router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...

随机推荐

  1. python 异常try/except语句

    异常模式的写法 try: 执行正常的模块 except X: 执行异常X的代码 except: 其他的异常执行模块except 必须在except X之后 else: 没有异常,则会执行完try,而后 ...

  2. 【Eureka篇三】Eureka常用配置说明(7)

    服务注册中心配置(Bean类:org.springframework.cloud.netflix.eureka.server.EurekaServerConfigBean) #关闭注册中心的保护机制, ...

  3. luoguP4585 [FJOI2015]火星商店问题

    题意 显然商店编号的限制能用可持久化trie解决. 特殊的商品预先判掉就好了,现在只考虑普通的商品. 发现商品的时间是单点,询问时一段时间,于是将询问区间在线段树上拆成\(log\)个区间,分别放上该 ...

  4. 2019 SDN上机第四次作业

    2019 SDN上机第4次作业 1. 解压安装OpenDayLight控制器(本次实验统一使用Beryllium版本) 修改环境变量 2. 启动并安装插件 3. 用Python脚本搭建如下拓扑,连接O ...

  5. vs code 中配置git go

    { "window.zoomLevel": 1, "editor.fontSize": 15, //"files.autoSave": &q ...

  6. nginx 一键安装

    #!/bin/bash1. 关闭防火墙 和 selinux service iptables stopsetenforce 0 2. 判断是否有nginx服务netstat -ntlp |grep n ...

  7. 【day02】Xhtml

    一.HTML实体(HTML Entites) 1.HTML实体:W3C规定在浏览器看到的特殊符号必须用HTML实体  单引号(') ===== '  双引号(") ===== "  ...

  8. 05-01 seaborn

    1.Seaborn 在上节中我们学习了matplotlib,这节课我们来看看另一个可视化的模块seaborn,它是基于matplotlib的更高级的开源库,主要用作于数据可视化,解决了matplotl ...

  9. QFile 打开文件,不用先判断文件名是否为空,做这多余的工作

    void test_file() { QFile file(""); if (!file.open(QIODevice::WriteOnly)){ qDebug()<< ...

  10. 修改kile工程名字(转)

    假设原来的工程文件名是first,要改成second1.在工程文件目录中,将first.uvopt和first.uvproj名字改成second.uvopt和second.uvproj.2.其他fir ...