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传参的使用和区别的更多相关文章

  1. vue params和query传参区别

    参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...

  2. params 和 query 传参的区别

    很多人都知道params 和  query  都可以在页面跳转的时候传递参数. query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数 ...

  3. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  4. vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  5. vue路由传值params和query的区别

    vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...

  6. Vue 踩坑日志 - 有关路由传参的坑

    1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...

  7. Vue路由query传参

    1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...

  8. vue路由对不同界面进行传参及跳转的总结

    最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...

  9. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

随机推荐

  1. Linux 下 Bash 脚本对拍

    背会... #!/bin/bash i= while true ;do ./maker > data.in ./a <data.in> data.out ./b <data.i ...

  2. CCF201409-2 画图 java(100分)

    试题编号: 201409-2 试题名称: 画图 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y2)的矩形指将横坐 ...

  3. CCF201703-2 学生排队 java(100分)

    试题编号: 201703-2 试题名称: 学生排队 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 体育老师小明要将自己班上的学生按顺序排队.他首先让学生按学号从小到大的顺序排 ...

  4. this与const

    在普通非const成员函数中,this是const指针,而在const成员函数中,this是const对象的const指针. class Foo { Foo& get_self1(void) ...

  5. 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 ...

  6. orcad中注意的事情

    1.地的标识不能放到已经分配了网络的线上. 在用orcad画原理图的时候,把电源放到网络的时候需要特别的注意,如果,将电源地直接放到线上,而这根线又已经被分配了网络标号,那这个地会随已经分配了的网络号 ...

  7. noip模拟赛 毁灭

    题目描述 YJC决定对入侵C国的W国军队发动毁灭性打击.将C国看成一个平面直角坐标系,W国一共有n^2个人进入了C国境内,在每一个(x,y)(1≤x,y≤n)上都有恰好一个W国人.YJC决定使用m颗核 ...

  8. Win32编程API 基础篇 -- 5.使用资源

    使用资源 你可能想参考教程结尾的附近,为了获得跟VC++和BC++资源相关的信息. 在我们讲得更加深入之前,我将大致讲解一下资源的主题,这样在每个小节中我就不必再去重讲一遍了.在这一小节中,你不需要编 ...

  9. Cocoa -- 添加和移除开机启动项

    一 写plist到~/Library/LaunchAgents/ 目录下 // 配置开机默认启动 -(void)installDaemon{ NSString* launchFolder = [NSS ...

  10. DATASNAP压缩过滤器的使用

    ZLIBCOMPRESSION FILTER 作为范例,我们使用已随D2010提供的DataSnap过滤器.可用于在客户端和服务端压缩数据流.这里说的ZlibCompression过滤器可以在DbxC ...