$router 和 $route的区别
router
router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局对象,他包含了所有的路由以及许多关键的对象和属性。
举例:history对象
$router.push({path:'home'})
本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录
$router.replace({path:'home'});//替换路由,没有历史记录
route
route表示一个当前活跃的路由对象,每一个路由都会有一个route对象,是一个局部的对象,包含name,path,params,query等属性,下面的例子就是一个route对象
{
path: 'table',
name: '讲师列表',
component: () => import('@/views/edu/teacher/list'),
meta: { title: '讲师列表', icon: 'table' }
},
我们可以从vue devtools中看到每个路由对象的不同


从上面的例子中可以看出两者的区别:
$route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,如"/home/news"。$route.params
对象,包含路由中的动态片段和全匹配片段的键值对$route.query
对象,包含路由中查询参数的键值对。例如,对于/home/news/detail/01?favorite=yes,会得到$route.query.favorite == 'yes'。$route.router
路由规则所属的路由器(以及其所属的组件)。$route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。$route.name
当前路径的名字,如果没有使用具名路径,则名字为空。
route几个属性涉及到路由参数传递:传送门:路由参数传递
参考文章
随机推荐
- git 合并分支 git merge branch_name
* 查看分支 git branch * 更新 git pull * 切换到master分支 git checkout master Checking out files: 100% (907/907) ...
- greedy algorithm, insertion sort, quick sort
always makes the choice that seems to be the best at that moment. Example #1: @function: scheduling ...
- 『Python』matplotlib的imshow用法
热力图是一种数据的图形化表示,具体而言,就是将二维数组中的元素用颜色表示.热力图之所以非常有用,是因为它能够从整体视角上展示数据,更确切的说是数值型数据. 使用imshow()函数可以非常容易地制作热 ...
- RabbitMQ3.9.7在CentOS7中的安装搭建
1.概述 RabbitMQ 是目前很流行的消息中间件之一,可靠性非常好,能简单的实现高可用.负载均衡. 今天我们先来聊一下 RabbitMQ 3.9.7 版本在 CentOS7 中的安装. 2.安装R ...
- 鸿蒙内核源码分析(内存映射篇) | 虚拟内存虚在哪里 | 百篇博客分析OpenHarmony源码 | v15.03
百篇博客系列篇.本篇为: v15.xx 鸿蒙内核源码分析(内存映射篇) | 虚拟内存虚在哪里 | 51.c.h .o 内存管理相关篇为: v11.xx 鸿蒙内核源码分析(内存分配篇) | 内存有哪些分 ...
- 基于 Vuex 的时移操作(撤回/恢复)实现
最近做了一个 BI 平台的可视化看板编辑器,项目刚做完一期,各方面的功能都还能粗糙,但该有的也都有了,比如编辑器场景下最基本的两类时移操作-撤回(undo) 和恢复 (redo). 用 vuex 实现 ...
- JavaWeb#JSP内置对象
[1.JSP内置对象简介] 内置对象:不加声明就可以在JSP页面脚本中使用的成员变量.(使用这些对象可以更容易收集客户端发送的请求信息,响应客户端的请求及存储客户信息.) 主要介绍:out,reque ...
- 如何评估 Serverless 服务能力?这份报告给出了 40 条标准
编者按:两年前,我们还在讨论什么是 Serverless,Serverless 如何落地.如今,已经有评测机构给出了 40 条标准来对 Serverless 的服务能力进行评估,这些评估细则既是技术生 ...
- cmd下载慢
是网络的原因,加一个镜像服务器 pip install *** -i https://pypi.tuna.tsinghua.edu.cn/simple
- 创建第一个Android项目
目录 创建第一个Android项目 创建HelloWorld项目 选择模板 选择模板界面的英文翻译 配置项目 配置项目界面英文翻译及解释 配置项目界面的注意事项 Name的命名规范 Package n ...