一、$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上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?

随机推荐

  1. 【Linux】- 同步网络时间

    转自:Linux同步网络时间 Linux服务器运行久时,系统时间就会存在一定的误差,一般情况下可以使用date命令进行时间设置,但在做数据库集群分片等操作时对多台机器的时间差是有要求的,此时就需要使用 ...

  2. 马士兵对话京东T6阿里P7(薪水):月薪5万,他为何要离职?

    马士兵大佬你知道吗? 你竟然不知道?你怎么可能不知道!你不知道是不可能的! 记得自己的第一行Java代码,你的Hello World是跟着谁学的吗?我的就是马士兵老师! 马士兵是唯一一个在当时讲课是让 ...

  3. 使用IntelliJ IDEA配置Maven(详细操作)

    一,下载Maven 进入官网http://maven.apache.org/  点击Download 找到如下图所示的区域,注意你的操作系统. 点击安装你所需要的安装包,下载,解压. 二,Maven环 ...

  4. 【linux】记录一下遇到的各种问题

    1. 解决办法: pthread不是Linux系统的默认库,编译时加上-lpthread参数,以调用链接库 gcc -o 文件名.out 文件名.c -lpthread 输出的时候直接 ./文件名.o ...

  5. Activity向Fragment传值

    发送数据 //Activity传值,通过Bundle Bundle bundle = new Bundle(); bundle.putString("MainActivity", ...

  6. 请问如何实现字符串UTF8->BIG5,BIG5->UTF8。保证送分。-Java/JavaSE

    请问如何实现字符串UTF8-> BIG5,BIG5-> UTF8. ------回答--------- ------其他回答(100分)--------- public String BI ...

  7. TCP的状态及变迁

    十一种状态如下图: 全部11种状态1. 客户端独有的:(1)SYN_SENT (2)FIN_WAIT1 (3)FIN_WAIT2 (4)CLOSING (5)TIME_WAIT .2. 服务器独有的: ...

  8. 【BZOJ5093】图的价值

    题面 Description "简单无向图"是指无重边.无自环的无向图(不一定连通). 一个带标号的图的价值定义为每个点度数的k次方的和. 给定n和k,请计算所有n个点的带标号的简 ...

  9. PHP实现上传视频的功能

    首先前台HTML表单代码如下: <html> <head> <meta http-equiv="Content-Type" content=" ...

  10. 自定义solr域中的配置

    <!-- IKAnalyzer--> <fieldType name="text_ik" class="solr.TextField"> ...