一、$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. 转-基于NodeJS的14款Web框架

    基于NodeJS的14款Web框架 2014-10-16 23:28 作者: NodeJSNet 来源: 本站 浏览: 1,399 次阅读 我要评论暂无评论 字号: 大 中 小 摘要: 在几年的时间里 ...

  2. ASP.NET MVC 3 技术(九) 301永久重定向不带www域名到带www的域名

    在 .net 4 中实现永久重定向非常容易,可以参考ASP.NET MVC3 技术(四) 永久重定向方法.今天主要说明下怎么在 asp.net mvc 3 实现从带www的域名永久重定向到不带www的 ...

  3. service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误

    service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误的方法如下: [root@ctohome.com ~]# service ...

  4. Redis在CentOS6.4中的安装

    首先,介绍一下Redis数据库.Redis是一种面向“键/值”对数据类型的内存数据库,可以满足我们对海量数据的读写需求. 1)redis的键只能是字符串: 2)redis的值支持多种数据类型: a:字 ...

  5. hdu 2818 Building Block(加权并查集)2009 Multi-University Training Contest 1

    题意: 一共有30000个箱子,刚开始时都是分开放置的.接下来会有两种操作: 1. M x y,表示把x箱子所在的一摞放到y箱子那一摞上. 2. C y,表示询问y下方有多少个箱子. 输入: 首行输入 ...

  6. 点击鼠标获取元素ID

    原文:点击鼠标获取元素ID public partial class Form1 : Form { public Form1() { InitializeComponent(); } private ...

  7. 3553: [Shoi2014]三叉神经树(树链剖分)

    这道题特别恶心,首先我们可以发现更改的就是出现连续的一或二,那么就用线段树+树链剖分找到这个范围 想到是不难想,就是打起来恶心罢了= = CODE: #include<cstdio> #i ...

  8. 《Java编程思想》读书笔记-第一个Java程序

    积少成多,欢迎大家关注我的微信公众号,共同探讨Java相关技术 今天的重点是:编写源代码.编译.运行.查看成果.除此之外,还需要搭建起与前面学习的知识的联系. 写本文时依据的系统环境是Windows1 ...

  9. 转载:HBuilder常用快捷键

    原文:http://www.cnblogs.com/DCL1314/p/8625110.html HBuilder常用快捷键 1.文件 新建 Ctrl + N 关闭 Ctrl + F4 全部关闭 Ct ...

  10. nmapport状态解析