vue $router和$route的区别详解


Posted in Vue.js onDecember 02, 2020

一、router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象。。。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样。。。

this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档

route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。

打印this.$route和this.$router。

vue $router和$route的区别详解

路由传参的方式

1.可以手写完整的path:

this.$router.push({path:`/user/${userId}`})

这样传递参数的话,配置路由的时候需要在path上加参数path:user/:userId。

这种接收参数的方式是this.$route.params.userId。

2.也可以用params传递:

vue $router和$route的区别详解

3.也可以用query传递:

vue $router和$route的区别详解

query传参是针对path的,params传参是针对name的。。接收参数的方式都差不多。。this.$route.query.和this.$route.params.

注意这只是跳转url,跳转到这个url显示什么组件,得配置路由。router跳转和<router-link>标签跳转,规则差不多。

展示上的话:

vue $router和$route的区别详解

注意:如果提供了path,params将会被忽略,但是query不属于这种情况。。。

如果使用完整路径和query传参,刷新页面时不会造成路由传参的参数丢失。

这个vue官方文档讲的很详细。

二、有时候配置路由时path有时候会加 '/' 有时候不加,例如path:'name'和path:'/name'。区别其实官方文档说了,我当时没仔细看,导致这个问题还困扰了我很久。

vue $router和$route的区别详解

意思就是以 / 开头的会被当做路径,就不会一直嵌套之前的路径。

到此这篇关于vue $router和$route的区别详解的文章就介绍到这了,更多相关vue $router和$route内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 #Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 #Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 #Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 #Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 #Vue.js
vue实现表格合并功能
Dec 01 #Vue.js
You might like
php中JSON的使用方法
2015/04/30 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
校园十大歌手策划书
2014/02/01 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
体育个人工作总结
2015/02/09 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL