路由对象
在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。
路由对象暴露了以下属性:
  • $route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,如 "/home/news" 。
  • $route.params
对象,包含路由中的动态片段和全匹配片段的键值对
  • $route.query
对象,包含路由中查询参数的键值对。例如,对于 /home/news/detail/01?favorite=yes ,会得到$route.query.favorite == 'yes' 。
  • $route.router
路由规则所属的路由器(以及其所属的组件)。
  • $route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
  • $route.name
当前路径的名字,如果没有使用具名路径,则名字为空。
在页面上添加以下代码,可以显示这些路由对象的属性:
<div>
<p>当前路径:{{$route.path}}</p>
<p>当前参数:{{$route.params | json}}</p>
<p>路由名称:{{$route.name}}</p>
<p>路由查询参数:{{$route.query | json}}</p>
<p>路由匹配项:{{$route.matched | json}}</p>
</div>

  

vue 路由对象(常用的)的更多相关文章

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

    路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...

  2. vue 路由对象

    路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...

  3. vue常用的路由对象

    官网上解释:一个路由对象表示当前激活的路由的状态信息 路由对象,在组件内即this.$route,存着一些与路由相关的信息,当路由切换时,路由对象会被更新 //如果要在刷新页面时候通过路由的信息来操作 ...

  4. vue路由信息对象

    一个路由信息对象表示当前激活的路由的状态信息,每次成功的导航后都会产生一个新的对象. path字符串,对应当前路由的路径 params对象,包含动态路由参数 query对象,URL查询参数 hash字 ...

  5. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  6. Vue路由开启keep-alive时的注意点

    Vue路由开启keep-alive时的注意点   这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 ke ...

  7. Vue路由钩子 afterEach beforeEach区别

    ​ vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path ...

  8. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 下)

    大家好,在上一篇系列文章里,我们一起学习了路由的基本配置,如何创建路由和传参,本篇文章我们一起学习下 Navigation 导航和路由守卫的相关内容. Navigation 如果要改变当前路径,我们可 ...

  9. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

随机推荐

  1. Git 基本知识与常用指令

    一.Git代码状态转换图 其中: 未被Git跟踪的状态为unstage状态: 已被Git跟踪的状态为stage状态(stage:阶段),因此包括staging状态和staged状态. untrack ...

  2. linux注册服务教程

    该说明是项目完成很久之后,整理资料时的偶然发现,当时所操作的linux为中标麒麟,需要对项目进行开机自启,对llinux还不熟悉,找不到linux中的服务自启设置.辗转多次才找到了解决方案.记录以供参 ...

  3. 用ESP8266 WIFI模块连接服务器,并实现与服务器相互通讯

    最近在做一个智能锁的项目,该项目要求实现在任何地方(当然是要有网络的)可以在手机上用APP开锁.而我负责的部分主要是实现底层与服务器连接,并且要能相互通讯.考虑了很多问题,最终选择了用ESP8266 ...

  4. BIEE入门(二)物理层的定义

    使用BIEE的第一步是使用admintool去建立一个多维数据模型,而建立多维数据模型的第一步则是建立物理层,请注意因为BIEE本身并不存 储数据,所以所谓BIEE物理层的意义是需要在BIEE里建立各 ...

  5. 聚合不应出现在 UPDATE 语句的集合列表中

    修改语句: update A set WZCount=ISNULL(WZCount,0)+(select SUM(WZCount) from T_PM_OutStock_SUB where Mater ...

  6. 如何批量删除Redis数据库中的Key

    借助 Linux 的 xargs 指令来完成 redis-cli keys "*" | xargs redis-cli del //如果redis-cli没有设置成系统变量,需要指 ...

  7. 用大白话告诉你什么是Event Loop

    文章原文地址 前沿 从前有座山,山里有座庙,庙里有个小和尚在讲故事.讲什么呢?讲的是: 从前有座山,山里有座庙,庙里有个小和尚在讲故事.讲什么呢?讲的是: 从前有座山,山里有座庙,庙里有个小和尚在讲故 ...

  8. SAP订单编排和流程增强概述

    SAP产品里的订单处理,无论是On-Premises解决方案还是云产品,我认为归根到底可以概括成四个字:订单编排,包含两个层次的内容: 1. 单个订单通过业务流程或者工作流驱动的状态迁移: 2. 多种 ...

  9. python入门11 元组tuple

    tuple元组是一种不可变数据类型,也是一种序列,因此可用序列的各类方法,比如切片和索引 #coding:utf-8 #/usr/bin/python """ 2018- ...

  10. [18/11/29] 继承(extends)和方法的重写(override,不是重载)

    一.何为继承?(对原有类的扩充) 继承让我们更加容易实现类的扩展. 比如,我们定义了人类,再定义Boy类就只需要扩展人类即可.实现了代码的重用,不用再重新发明轮子(don’t  reinvent  w ...