首页 > vue路由对象($route)参数简介

vue路由对象($route)参数简介

路由对象

在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。

so , 路由对象暴露了以下属性:

1.$route.path

字符串,等于当前路由对象的路径,会被解析为绝对路径,如 "/home/news" 。



2.$route.params

对象,包含路由中的动态片段和全匹配片段的键值对。



3.$route.query

对象,包含路由中查询参数的键值对。例如,对于 /home/news/detail/01?favorite=yes ,会得到$route.query.favorite == 'yes' 。



4.$route.router

路由规则所属的路由器(以及其所属的组件)。



5.$route.matched

数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。



6.$route.name

当前路径的名字,如果没有使用具名路径,则名字为空。



在页面上添加以下代码,可以显示这些路由对象的属性:

1 <div>
2 <p>当前路径:{ {$route.path}}p>
3 <p>当前参数:{ {$route.params | json}}p>
4 <p>路由名称:{ {$route.name}}p>
5 <p>路由查询参数:{ {$route.query | json}}p>
6 <p>路由匹配项:{ {$route.matched | json}}p>
7 div>

 

转载于:https://www.cnblogs.com/wangEddy/p/8310262.html

更多相关:

  • Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载。这里是指对应组件的代码)。 ↓② CanAcitivate:进入到当前路由的时候触发(即使返回的是false,用户并没有权限访问该路由,但是相应的模块会被加载)。 ↓③ CanActivate...

  • 深度玩家可移步Angular - 常见路由任务 1、嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步加载//这就是嵌套路由↓children:[{path:'first-sub1',component:firstSub1Com...

  • 文章目录前言语法格式命令使用输出含义使用实例 前言 route命令用于显示和配置IP路由表,在不同节点间的网络通信,想要实现同一局域网之间的通信就需要交换机,不同局域网之间的通信就需要路由器。而路由器的存在是为了提供NAT转换,即提供ip地址和物理地址之间的映射关系,因为不同局域网节点之间的通信是需要直到对方局域网的外网ip...

  • 一、路由表 所谓路由表,指的是路由器或者其他互联网网络设备上存储的表,该表中存有到达特定网络终端的路径,在某些情况下,还有一些与这些路径相关的度量。 二、常见路由表生成算法 路由算法是提高路由协议功能,尽量减少路由时所带来开销的算法。当实现路由算法的软件必须运行在物理资源有限的计算机上时高效尤其重要。路由算法必须健壮,即在出现...

  • 点云PCL免费知识星球,点云论文速读。文章:DSP-SLAM: Object Oriented SLAM with Deep Shape Priors作者:Jingwen Wang Martin Runz Lourdes Agapito编译:点云PCL代码:https://github.com/JingwenWang95/DSP-S...

  • RAM缓存 新RAM缓存算法(CLFUS) 新的RAM缓存使用的创意来自许多缓存替换策略和算法,包括LRU,LFU,CLOCK,GDFS及2Q,它被命名为时钟周期内最小频繁使用大小算法CLFUS(Clocked Least Frequently Used by Size)。它避开了任何专利算法,具有如下特性: 均衡最近性(Rec...

  • MP4 |视频:AVC,1280×720 30 fps |音频:AAC,48 KHz,2 Ch |时长:2h 12m 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:560M C4D是一个有抱负的运动图形艺术家和设计师的重要工具。借助C4D,您可以使用3D对象、动态效果和动画来增强运动图形、模型和可视化效果。本课...

  • 文章目录先说问题:再说解决尝试1:尝试2(该尝试建议先在自己环境搭配对应业务测试通过后再现场尝试): 感谢 学无止境996同学的陪伴和vigourtyy美丽女友的支持,直到这个解决问题的深夜 先说问题: ceph 12.2.1生产环境:3副本 tier + 3副本data 机房在拥有业务的情况下重启集群交换机,产生如下场景...

  • 这周主要学习了java中的类和对象的知识点,发现和C++中的类和对象极为相似,对于类和对象的概念理解起来也简单。同时在自学的过程中也把类的知识重新复习巩固了一下(如类的三大特征:继承,封装和多态,构造,成员对象的访问权限,构造,无参有参函数的调用等),同时也了解到一些新的概念,比如类对象创建和引用占据堆内存和栈内存,输出对象时默认调...

  • 大牛们应该对路径都很了解了,这篇文章主要给像我这样的入门小白普及常识用的,啊哈下面的路径介绍针对windows,其他平台的暂时不是很了解。在编写的py文件中打开文件的时候经常见到下面其中路径的表达方式:open('aaa.txt')open('/data/bbb.txt')open('D:\user\ccc.txt')这三种表达式...

  • 1)绝对路径:绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。例如:C:windowssystem32cmd.exe  注意: 在不同系统的情况系 windows下是“”,linux和unix下是“/” ,但在win中没有本质区别。linux和unix系统中绝对路径 以“/”为起始 例:/home/us...

  •     最终运行效果 当然,这个Application context路径可以直接删掉不需要最终访问路径就会变成http://localhost:8080/...

  •     1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用 require('@/assets/home/imgName.png') 2、在css或者scss或者html里面的src中引入图片使用(注意如果是:src=后面用第1种方式引入路径) ~@/assets/components...

  • 寻路算法大总结! 交换机生成树采用的是完全不同的D-V(distance vector)距离矢量算法,并不是很可靠. 并不是任意两点之间的最短路径,因为任意两点之间取最短路径可能有环路:总权更大 交换机STP不一定是最小生成树!!!举例论证 因为它只是所有交换机到根桥最短 贪心算法的味...