$router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别
一、$router和$route的区别
$router : 是路由操作对象,只写对象
$route : 路由信息对象,只读对象
例子:
//$router操作 路由跳转
this.$router.push({ name:'hello', params:{ name:'word', age:'11' } })
//$route读取 路由参数接收
var name = this.$route.params.name;
二、路由跳转方式name 、 path 和传参方式params 、query的区别
path 和 Name路由跳转方式,都可以用query传参
例子:
//Router.js
{
path: '/hello',
name: 'HelloWorld',
component: helloPage
}
跳转方式name
this.$router.push({
name: 'HelloWorld',
query: {
id: 12345
}
})
跳转方式path
this.$router.push({
path: '/hello',
query: {
id: 12345
}
})
//获取路由参数信息方式:
{{$route.query.id}
path路由跳转方式,params传参会被忽略,只能用name命名的方式跳转
params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!
另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示
注意:params传参如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?
随机推荐
- HBase 热点问题——rowkey散列和预分区设计
热点发生在大量的client直接访问集群的一个或极少数个节点(访问可能是读,写或者其他操作).大量访问会使热点region所在的单个机器超出自身承受能力,引起性能下降甚至region不可用,这也会影响 ...
- 【linux】记录一下遇到的各种问题
1. 解决办法: pthread不是Linux系统的默认库,编译时加上-lpthread参数,以调用链接库 gcc -o 文件名.out 文件名.c -lpthread 输出的时候直接 ./文件名.o ...
- bootstrap学习(四)表格
基础样式: 自适应沾满浏览器 <table class="table"> <tr> <th>序号</th> <th>姓名 ...
- ArcGis 创建含孔洞面要素AO C#
IGeometryCollection geometryCollection = new PolygonClass(); IPointCollection pointCollection_Exteri ...
- springMVC框架入门案例
控制器: package cn.mepu.controller; import org.springframework.stereotype.Controller; import org.spring ...
- ASE——第一次结对作业
ASE--第一次结对作业 问题定义 很早就听说了MSRA的黄金点游戏,让大家写Bot来参加比赛看谁的AI比较聪明可以操盘割韭菜.深感ASE课程老师设计的任务太用心了,各种接口都准备好了,大家只用专注于 ...
- NetCore利用CsvHelper解析支付宝对账单
支付宝账单是zip压缩文件流,里面包含了两个.csv文件. 1.请求支付宝账单下载链接,获取到zip文件流. var httpClient = _clientFactory.CreateClient( ...
- Linux账号管理与ALC权限设定(二) 批量增加用户脚本
接上篇.鸟哥提出了一个问题.就是 如果myuser1用户是这个项目的助理,他只能查看该目录下的内容,而无法修改删除.那该如何操作呢? 首先,不能将该用户加入projecta这个群组,否则他也可以修改删 ...
- 更新view是可以update到表的
视图不是表,视图里面的数据是通过sql语句去表中查询得到的.当表中的数据发送更改之后,视图里的数据也会发生相应的更改.所以我么一般有两种方式更新视图里面的数据:一是更新表中的数据,从而间接地更新视图中 ...
- web.xml中配置——配置springmvc
<servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springfr ...