Vue Router的params和query传参的使用和区别
vue页面跳转有两种方式分别是:name和path
this.$router.push({name: 'HelloWorld2})
this.$router.push({path: '/hello-world1'})
传参也有两种方式分别是:params和query
this.$router.push({name: 'HelloWorld2', params:{id:1}})
this.$router.push({path: '/hello-world2', query:{id:2}})
下面放张图来展示路径和参数之间的关系
结论:
使用name跳转可以用params和query传参
当name和query对应的时候也可以跳转并传参,但是路由后面不能加参数名,否则页面会变空白
使用path跳转只能用query传参
如果使用path对应params则数据传输不过去
使用query传参地址栏用?拼接起来的,类似于Ajax中的get请求
{
path: '/hello-world',
name: 'HelloWorld2',
component: HelloWorld2
}
这是使用query传参的地址栏显示:hello-world?id=2
使用params传参的时候要在路由后面加参数名,(如果不加参数名也可以传递参数,但是页面一刷新参数就丢失了),并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以
{
path: '/hello-world/:id',
name: 'HelloWorld2',
component: HelloWorld2
}
这是使用params传参的地址栏显示:hello-world/2
讲了传参怎么接受参数呢?
params和query接受参数很类似
this.$route.params.id,
this.$route.query.id,
这里注意使用的是route不是router!
再来补充下使用
<router-link>对应path和name怎么传参
先来看index.js的写法
{
path: '/my-order/:state',
name: 'my-order',
component: MyOrder,
}
path传参:
<router-link:to="{path: '/select-address/0'}"></router-link>
看见了吧,直接在跳转的时候在地址栏拼接上对应的参数即可,
name传参:
<router-link :to="{name: 'my-order', params: {state: 0}"></router-link>
使用name传参的时候就不能在地址栏进行拼接操作,需要写出对应的参数名
接受参数跟上面的都一样
Vue Router的params和query传参的使用和区别的更多相关文章
- vue params和query传参区别
参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...
- params 和 query 传参的区别
很多人都知道params 和 query 都可以在页面跳转的时候传递参数. query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数 ...
- (转)vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue路由传值params和query的区别
vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...
- Vue 踩坑日志 - 有关路由传参的坑
1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...
- Vue路由query传参
1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...
- vue路由对不同界面进行传参及跳转的总结
最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
随机推荐
- Linux 下 Bash 脚本对拍
背会... #!/bin/bash i= while true ;do ./maker > data.in ./a <data.in> data.out ./b <data.i ...
- CCF201409-2 画图 java(100分)
试题编号: 201409-2 试题名称: 画图 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y2)的矩形指将横坐 ...
- CCF201703-2 学生排队 java(100分)
试题编号: 201703-2 试题名称: 学生排队 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 体育老师小明要将自己班上的学生按顺序排队.他首先让学生按学号从小到大的顺序排 ...
- this与const
在普通非const成员函数中,this是const指针,而在const成员函数中,this是const对象的const指针. class Foo { Foo& get_self1(void) ...
- Codeforces 934D/933B - A Determined Cleanup
传送门:http://codeforces.com/contest/934/problem/D 给定两个正整数p(p≥1).k(k>1).多项式f(x)的系数的取值集合为{0,1,2,...,k ...
- orcad中注意的事情
1.地的标识不能放到已经分配了网络的线上. 在用orcad画原理图的时候,把电源放到网络的时候需要特别的注意,如果,将电源地直接放到线上,而这根线又已经被分配了网络标号,那这个地会随已经分配了的网络号 ...
- noip模拟赛 毁灭
题目描述 YJC决定对入侵C国的W国军队发动毁灭性打击.将C国看成一个平面直角坐标系,W国一共有n^2个人进入了C国境内,在每一个(x,y)(1≤x,y≤n)上都有恰好一个W国人.YJC决定使用m颗核 ...
- Win32编程API 基础篇 -- 5.使用资源
使用资源 你可能想参考教程结尾的附近,为了获得跟VC++和BC++资源相关的信息. 在我们讲得更加深入之前,我将大致讲解一下资源的主题,这样在每个小节中我就不必再去重讲一遍了.在这一小节中,你不需要编 ...
- Cocoa -- 添加和移除开机启动项
一 写plist到~/Library/LaunchAgents/ 目录下 // 配置开机默认启动 -(void)installDaemon{ NSString* launchFolder = [NSS ...
- DATASNAP压缩过滤器的使用
ZLIBCOMPRESSION FILTER 作为范例,我们使用已随D2010提供的DataSnap过滤器.可用于在客户端和服务端压缩数据流.这里说的ZlibCompression过滤器可以在DbxC ...