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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue css 相对路径导入问题级踩坑记录
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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
学习php笔记 字符串处理
2010/10/19 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
laravel入门知识点整理
2020/09/15 PHP
Node.js实现简单聊天服务器
2014/06/20 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
Python脚本实现自动发带图的微博
2016/04/27 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python3爬取数据至mysql的方法
2018/06/26 Python
django创建简单的页面响应实例教程
2019/09/06 Python
什么是python类属性
2020/06/10 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
自荐信不宜过于夸大
2013/11/06 职场文书
高中英语教学反思
2014/02/04 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
啤酒节策划方案
2014/05/28 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2014年司机工作总结
2014/11/21 职场文书
老公保证书
2015/01/17 职场文书
政协工作总结2015
2015/05/20 职场文书
回复函格式及范文
2015/07/14 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python