一、$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. Java中的注解到底是如何工作的?

    作者:人晓 www.importnew.com/10294.html 自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到诸如@Over ...

  2. Spring Enable高级应用及原理

    Enable* 之前的文章用到了一些Enable*开头的注解,比如EnableAsync.EnableScheduling.EnableAspectJAutoProxy.EnableCaching等, ...

  3. bzoj4544 椭圆上的整点

    我会所有推理..... Q1:真的这么暴力的统计答案? Q2:蜜汁统计答案.... Q3:为什么不考虑3在不同的位置的情况

  4. 从URL输入到页面展现,过程中发生了什么?

    从在地址栏中输入了URL,到浏览器展现出页面整个过程中,大概经历了如下过程: 在浏览器地址中输入了URL并回车 域名解析 服务器处理请求 浏览器处理 网页的绘制 一.在浏览器地址中输入URL 首先解释 ...

  5. C#排序 转

    本文链接:https://blog.csdn.net/fysuccess/article/details/36416255 C#中List<T>排序的两种方法 List<Studen ...

  6. poj 2752 kmp的next数组

    题目大意: 求一个字符串中某一个既是前缀又是后缀的前缀的结尾下标: 基本思路: 从_next[len]开始找_next[_next[len]],再找_next[_next[_next[len]]],一 ...

  7. Java高并发网络编程(二)BIO

    一.阻塞 服务器端 public class BIOServer { public static void main(String[] args) throws Exception { ServerS ...

  8. Java中的LinkedList

  9. react-devtools超级简单安装教程

    有时候看网上各路大神,写如何安装react-devtools,大神就是大神,好多步骤一笔带过,导致一些学习者看的一脸懵逼,今天我给大家讲超级简单的react-devtools安装步骤,相信看过的小伙伴 ...

  10. vue 表格 多选 换页保存前一页的状态

    表格多选 点击下一页,上一页的状态没消失. 在表格 添加 row-key="id" 在表格行里添加 reserve-selection