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 相关文章推荐
vue3.0实现插件封装
Dec 14 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue3不同环境下实现配置代理
May 25 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
php 表单验证实现代码
2009/03/10 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
wxPython学习之主框架实例
2014/09/28 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python中bisect的用法及示例详解
2020/07/20 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
网络编辑职责
2014/03/01 职场文书
六一节目主持词
2014/04/01 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
党支部意见范文
2015/06/02 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
田径运动会广播稿
2015/08/19 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
Redis过期数据是否会被立马删除
2022/07/23 Redis