$router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别

码途领航
• 阅读 2221

一、$router和$route的区别
$router : 是路由操作对象,只写对象
$route : 路由信息对象,只读对象

//$router操作 路由跳转

// 字符串
   this.$router.push('home')
// 对象
   this.$router.push({ path: 'home' })
// 命名的路由
   this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=123
   this.$router.push({ path: 'register', query: { plan: '123' }})

//$route读取 路由参数接收
var name = this.$route.params.name;

二、params 、query的区别

1.this.$route.query的使用

A、传参数:

this.$router.push({
         path: '/monitor',
         query:{
               id:id,
          }
})

B、获取参数:
this.$route.query.id
C、在url中形式(url中带参数)

http://172.19.186.224:8080/#/monitor?id=1

D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据还会显示存在(项目中遇到此问题)

2.this.$route.params的使用
A、传参数:

this.$router.push({
         name: 'monitor',
         params:{
               id:id,
          }
})

B、获取参数:
this.$route.params.id
C、在url中形式(url中不带参数)
http://172.19.186.224:8080/#/monitor
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在(项目中遇到此问题)

三、name 、 path的区别

path 和 Name路由跳转方式,都可以用query传参
path路由跳转方式,params传参会被忽略,只能用name命名的方式跳转
params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!
另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

注意:params传参如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
LinMeng LinMeng
4年前
this.$router.replace和this.$router.push及this.$router.go()的区别
this.$router.push1.跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面2.声明式<routerlink:to"...."编程式router.push(...)//该方法的参数可以是一个字符串路径,或者一个描述地址的对象。this.$router.push('/index')
Souleigh ✨ Souleigh ✨
4年前
10个略骚的 Vue 开发技巧
路由参数解耦一般在组件内使用路由参数,大多数人会这样做:exportdefaultmethods:getParamsId()returnthis.$route.params.id在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只
LinMeng LinMeng
4年前
vue中页面间跳转传值的两种方式(query,params)
两者都可以传递参数,区别是什么?query传参配置的是path,而params传参配置的是name,在params中配置path无效query在路由配置不需要设置参数,而params必须设置query传递的参数会显示在地址栏中params传参刷新会无效,但是query会保存传递过来的值,刷新不变;query:this.$route
浩浩 浩浩
4年前
【Flutter实战】 路由管理
2.2路由管理路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewController。所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理。Flutter中的路由管理和原生开发类似,无论是Android还是
Stella981 Stella981
3年前
OpenVPN搭建中tap与tun的实际使用区别
tap俗称网桥模式,tun俗称路由模式,tap在二层,tun在三层,在实际应用中,其实以上这些知识概念,我是抄来的,具体的解释可以看以下参考链接。下面将介绍在实际使用中的区别:1、tap可以直接使用route这样的路由表命令,但不能用于手机设备。2、tun可以用于手机,但不能使用route这样的路由表命令,压根无法穿透。3、tap和tun的路
Wesley13 Wesley13
3年前
Vert.x Web 文档手册
Vert.xWeb中英对照表Container:容器Microservice:微服务Bridge:桥接Router:路由器Route:路由SubRoute:子路由Handler:处理器,某些特定的地方未翻译Blocking:阻塞式
Stella981 Stella981
3年前
Flutter企业级路由跳转框架fluro的使用(一)
久违了。记录fluro路由框架的使用。导入依赖  fluro: ^1.6.3组件封装routers.dart这个文件封装了一个路由器,定义了配置方法,封装了有返回值,和无返回值的路由跳转方法。//封装一个Routes 类class Routes {  //定义Router 对象  st
Wesley13 Wesley13
3年前
unity将 -u4E00 这种 编码 转汉字 方法
 unity中直接使用 JsonMapper.ToJson(对象),取到的字符串,里面汉字可能是\\u4E00类似这种其实也不用转,服务器会通过类似fastjson发序列化的方式,将json转对象,获取对象的值就是中文但是有时服务器要求将传参中字符串中类似\\u4E00这种转汉字,就需要下面 publ
Linux策略路由详解
概述在Linux中,我们通常使用route命令来做路由信息的管理。但是该命令仅仅只能用于基本路由信息的管理,面对功能更加强大的基于策略的路由机制,route命令就显得捉襟见肘。在传统路由算法中,只能基于目的地址进行路由选择。但是如果对
程序员一鸣 程序员一鸣
3个月前
鸿蒙开发:一文探究Navigation路由组件
如果你还在使用router做为页面跳转,建议切换Navigation组件作为应用路由框架,不为别的,因为官方目前针对router已不在推荐。