$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上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?
随机推荐
- js实现页面跳转的几种方法小结
地址:https://www.jb51.net/article/84335.htm 地址:https://blog.csdn.net/tsoteo/article/details/77849403
- Linux下设置Core文件生成路径及文件名
修改core dump文件路径: 方法1:临时修改: 修改/proc/sys/kernel/core_pattern文件/proc目录本身动态加载每次系统重启都会重新加载因此种方法只能作临时修改/p ...
- Python面试题之“猴子补丁”(monkey patching)指的是什么?这种做法好吗?
“猴子补丁”就是指,在函数或对象已经定义之后,再去改变它们的行为. 举个例子: import datetime datetime.datetime.now = lambda: datetime.dat ...
- ssh文件 ip锁定
vi ~/.ssh/config Host web*hostname 115.29.242.1**user lian Host **hostname 192.168.1.**user dface
- 服务bindService()方法启动服务
public class MainActivity extends Activity { private EditText studentno; private ServiceConnection c ...
- PAT 乙级练习题1002. 写出这个数 (20)
1002. 写出这个数 (20) 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10100. 输出格式 ...
- 前端学习(二十一)初识h5(笔记)
html5 主要目标:语义化!可以被人或者机器更好的阅读! 支持各种媒体的嵌入!不兼容低版本!------------ html5新标签: 普通: <header clas ...
- Linux curl 命令模拟 POST/GET 请求
Linux curl 命令模拟 POST/GET 请求 本文链接:https://blog.csdn.net/sunboy_2050/article/details/82156402 curl 命 ...
- Linux新建环境变量快速切换到文件夹(export)
如果有一个文件夹目录很深/home/user/aaa/bbb/ccc/ddd/eee/fff/ggg,但是经常要跳转到这个文件夹.一个简单的办法就是给这个文件夹建立一个类似$PATH那样的环境变量,如 ...
- Dart编程实例 - Dart 面向对象编程
Dart编程实例 - Dart 面向对象编程 class TestClass { void disp() { print("Hello World"); } } void main ...