一、$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. img点击放大的js实现

    业务需要,从后台获取图片列表,用img标签展示,由于图片太小看不清,需要点击放大,类似如下效果: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列 ...

  2. lzma 知识点滴

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xuweiwei1860/article/details/31419195 LZMA(Lempel-Z ...

  3. 自己写IRP,做文件操作,遇到的坑

    在写文件的时候没问题,但是写完文件之后,就出问题了, 什么问题呢,是因为写完文件之后,文件关闭之后, 调用了一个叫做 CcFlushCache 的函数,这个函数是从CcWriteBehind 调过来的 ...

  4. Invoke-Obfuscation混淆ps文件绕过Windows_Defender

    前提 powershell只能针对win7之后的系统,之前的win操作系统默认没有安装powershell. 所在目录:C:\Windows\System32\WindowsPowerShell\v1 ...

  5. Install ncurses (ncurses-devel) and try again

    apt install libncurses5-dev libncursesw5-dev

  6. windows系统exe文件图标变成了白色无图标

    转载:https://blog.csdn.net/whatday/article/details/52658412   在命令提示符下输入下列命令即可恢复.   按键 “WIN+R” 输入即可cmd ...

  7. 存储过程分页查询和在ado.net中的使用,返回查询总数

    1.创建查询分页的存储过程 CREATE PROCEDURE PageQuery @tableName VARCHAR(),-- 表名 @strWhere VARCHAR(),-- 查询条件 @col ...

  8. js取整 - 优雅版(装逼必备)

    var a = 2.98; var z1 = ~~a; var z2 = a | 0; var z3 = a>>0; console.log(z1, z2, z3);     // 2, ...

  9. python_django_分页

    分页:把从数据库中的数据分为多页在客户端显示. 在django中,可通过这两个对象来实现: Paginator对象 Page对象 Paginator对象与Page对象的关系: paginator对象调 ...

  10. Windows——关于Word2016/2019提示需要修复问题处理

    一.问题描述 打开Word提示 很抱歉此功能看似已中断,并需要修复.请使用Windows控制面板中的“程序和功能”选项修复Microsoft Office. 二.解决方法 运行 regedit 进入注 ...