路由对象
在使用了 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. scale 和 zoom,以及zoom的一些变态用法

    zoom和scale这两个东西都是用于对元素的缩放,一下是其中一些区别: 1.scale的缩小是以图片的中心,zoom的缩小是以图片的左上角. 2.zoom的缩放改变了元素占据的空间大小:而scale ...

  2. Hbase到Solr同步常用操作

    Hbase到Solr同步常用操作 1. 整体流程 2. 常用操作 Hbase常用操作 Solr常用操作 hbase-index常用操作 3. 其他资料 Lily HBase Indexer使用整理 h ...

  3. 转:什么是4D(DRG、DLG、DOM、DEM)数据?

    ps:摘抄地址http://blog.163.com/wangqing_rs/blog/static/16451519120111026102916472/  什么是4D(DRG.DLG.DOM.DE ...

  4. Hadoop fs命令(转)

    最近使用hive做一些etl工作,除了日常sql的编写,了解hadoop及hive的一些底层原理性质的东西包括调优非常有必要,一次hive调优就把原来的零散文件做了合并.首先记下hadoop常用的命令 ...

  5. MongoDB数据库 备份 还原

    MongoDB数据库 1.备份用        mongodump 2.还原用        mongorestore 1.备份 @echo offecho 正在备份MongoDB数据库SET mon ...

  6. 使用WindowsService为宿主实装WCF 服务

    1. 写WCF服务   创建一个接口类,与一个实现类.接口类上打上[ServiceContract]标签,需要暴露的服务方法上打上[OperationContract] (注意:增加System.Se ...

  7. Selenium2学习(十一)-- select下拉框

    本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就是select选项框,打开页面 ...

  8. Struts2学习-横切关注点

    1.建空项目 2.建包 3.建类 4.编写 package com.nf.action; import com.opensymphony.xwork2.ActionInvocation; import ...

  9. 原文:I don’t want to see another “using namespace xxx;” in a header file ever again

    http://stackoverflow.com/questions/5849457/using-namespace-in-c-headers http://stackoverflow.com/que ...

  10. log4net 配置完成后发现不能输出日志的解决方法

    配置好log4net后发现日志不能输出,打开调试看一下几个属性都是false,(比如isdebugenable =false)这其实是项目的启动时候没有加入一行声明代码导致的,可以在程序的Assemb ...