路由对象
在使用了 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. SharePoint 2013 - Callout

    1. 没有OOTB的方法对Callout进行修改,Callout可以使用在以下范围: Document Library Assert Library Images Library Pages Libr ...

  2. Ubuntu 安装第一步,打开ssh

    http://blog.csdn.net/u010447234/article/details/53557795 1.检查是否有ssh在运行 ps -e | grep ssh* 2.安装openssh ...

  3. 快速开始Python/WSGI应用程序

    快速开始Python-wsig应用程序 官方参考文档 安装 uwsgi 安装 pip install uwsgi uwsgi --version # 查看 uwsgi 版本 测试 uwsgi 是否正常 ...

  4. jboss安全配置规范

    https://wenku.baidu.com/view/aad157a4f242336c1fb95ed5.html https://wenku.baidu.com/view/ac227281ec3a ...

  5. 设计模式之适配器模式(Adapter)

    1. 概述 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 2. 解决的问题 即Adapter模式使得原本由于接口不兼容而不 ...

  6. 【java开发系列】—— JDOM创建、修改、删除、读取XML文件

    有很多中操作XML文件的方法,这里介绍一下JDOM的使用方法和技巧. JDOM下载地址 创建XML文档 XML文件是一种典型的树形文件,每个文档元素都是一个document元素的子节点.而每个子元素都 ...

  7. 【[SDOI2010]粟粟的书架】

    第一问的做法好像不太一样 首先第二问非常简单,直接在主席树上二分就好了,单次查询的复杂度\(O(logn)\) 第一问并没有想到有二分这种神仙操作,依旧用的是主席树 我们可以对矩阵建出主席树,也就是像 ...

  8. (第三场) C Shuffle Cards 【STL_rope || splay】

    题目链接:https://www.nowcoder.com/acm/contest/141/C 题目描述 Eddy likes to play cards game since there are a ...

  9. 2018.11.20 Struts2中对结果处理方式分析&struts2内置的方式底层源码剖析

    介绍一下struts2内置帮我们封装好的处理结果方式也就是底层源码分析 这是我们的jar包里面找的位置目录 打开往下拉看到result-type节点 name那一列就是我们的type类型取值 上一篇博 ...

  10. Android学习笔记_59_清除sdcard缓存

    对于手机来说,每个软件在安装时,都会在sdcard上创建一个目录,用于缓存文件.市场上针对这些软件,统一了它的sdcard上的目录,将缓存目录存放到数据库中.如果要清理,可以根据当前应用包的名称,到数 ...