$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上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?
随机推荐
- php中mkdir()函数的权限问题(转)
问题描述: 使用以下php代码创建了一个目录,期望目录的权限是0777,实际结果是0755 mkdir('./aa/',0777); 分析与测试结果: 1.mkdir()函数指定的目录权限只能小于等于 ...
- matlab中struct创建方法
MATLAB中struct创建方法可分为:直接创建法和struct()函数创建法 (1)直接创建: 直接定义字段,像使用一般matlab变量一样,不需要事先声明,支持动态扩充.下面创建一个Studen ...
- android中的SQLite数据库
SQLite是android中集成的一个轻量级的数据库,该数据库支持绝大部分SQL92语法 SQLiteDatabase代表一个数据库(底层就是一个数据库文件),一旦应用程序获得了代表指定数据库的SQ ...
- 5、springcloud整合mybatis注解方式
1.上一篇学习了服务提供者provider,但是并不是单单就学习了服务提供者.中间还穿插使用了Hikari数据源和spring cloud整合mybatis.但是上篇使用mybatis时还是沿用了老的 ...
- react踩坑
1.列表渲染一定要注意key的唯一性,不然会导致页面只更新部分的bug graphVertexConfigList.data.map((item, index) => { return < ...
- Activity向Fragment传值
发送数据 //Activity传值,通过Bundle Bundle bundle = new Bundle(); bundle.putString("MainActivity", ...
- 总结下awk基本用法
命令格式: awk '{commands} [{other commands}]' awk 'condition{commands} [{other commands}]' 如:awk '$4==&q ...
- python使用SMTP发邮件时使用Cc(抄送)和Bcc(密送)
SMTP发送邮件的时候,并没有特殊的通信语句告诉邮件服务器 谁是主送,谁是抄送/密送,这三个角色都是以同样的方式告诉邮件服务器的,然后重点在邮件内容里. 邮件内容分为头和体两部分(就像http),头部 ...
- 【Luogu】【关卡2-5】字符串处理(2017年10月)
任务说明:这里的字符串处理还会变得更加的有意思,难度也更大.需要好好地思考一下.
- day05 python字典
day05 python 一.字典 1.dict 用{}表示, 存放的是: key:value (开发的都知道的是键值对数据,这样说) key: 关键字不能重复, 不 ...