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 相关文章推荐
详解Vue 的异常处理机制
Nov 30 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue 实现上传组件
May 31 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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中substr()函数参数说明及用法实例
2014/11/15 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
php源码的使用方法讲解
2019/09/26 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python内置函数—vars的具体使用方法
2017/12/04 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python框架中flask知识点总结
2018/08/17 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
简历中自我评价分享
2013/10/09 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
表扬信范文
2019/04/22 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Python中time标准库的使用教程
2022/04/13 Python