一、$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. HBase 热点问题——rowkey散列和预分区设计

    热点发生在大量的client直接访问集群的一个或极少数个节点(访问可能是读,写或者其他操作).大量访问会使热点region所在的单个机器超出自身承受能力,引起性能下降甚至region不可用,这也会影响 ...

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

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

  3. bootstrap学习(四)表格

    基础样式: 自适应沾满浏览器 <table class="table"> <tr> <th>序号</th> <th>姓名 ...

  4. ArcGis 创建含孔洞面要素AO C#

    IGeometryCollection geometryCollection = new PolygonClass(); IPointCollection pointCollection_Exteri ...

  5. springMVC框架入门案例

    控制器: package cn.mepu.controller; import org.springframework.stereotype.Controller; import org.spring ...

  6. ASE——第一次结对作业

    ASE--第一次结对作业 问题定义 很早就听说了MSRA的黄金点游戏,让大家写Bot来参加比赛看谁的AI比较聪明可以操盘割韭菜.深感ASE课程老师设计的任务太用心了,各种接口都准备好了,大家只用专注于 ...

  7. NetCore利用CsvHelper解析支付宝对账单

    支付宝账单是zip压缩文件流,里面包含了两个.csv文件. 1.请求支付宝账单下载链接,获取到zip文件流. var httpClient = _clientFactory.CreateClient( ...

  8. Linux账号管理与ALC权限设定(二) 批量增加用户脚本

    接上篇.鸟哥提出了一个问题.就是 如果myuser1用户是这个项目的助理,他只能查看该目录下的内容,而无法修改删除.那该如何操作呢? 首先,不能将该用户加入projecta这个群组,否则他也可以修改删 ...

  9. 更新view是可以update到表的

    视图不是表,视图里面的数据是通过sql语句去表中查询得到的.当表中的数据发送更改之后,视图里的数据也会发生相应的更改.所以我么一般有两种方式更新视图里面的数据:一是更新表中的数据,从而间接地更新视图中 ...

  10. web.xml中配置——配置springmvc

    <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springfr ...