路由对象
在使用了 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. css 条纹背景

    先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...

  2. js简单实现表格排序

    昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...

  3. 05_Jedis操作Redis

    [工程截图] [String类型操作] package com.higgin.string; import java.util.List; import redis.clients.jedis.Jed ...

  4. 《ArcGIS Runtime SDK for Android开发笔记》——(12)、自定义方式加载Bundle格式缓存数据

    随着ArcGIS 10.3的正式发布,Esri推出了新的紧凑型缓存格式以增强用户的访问体验.新的缓存格式下,Esri将缓存的索引信息.bundlx包含在了缓存的切片文件.bundle中.具体如下图所示 ...

  5. 多线程(二)~Thread类相关的API介绍

      一.线程安全问题:     当我们使用多个线程操作统一方法内的局部变量的时候,每个局部变量在当前线程里都有自己的副本,这种情况是不会出现线程安全问题的.当我们两个线程同时操作全局变量的时候,有可能 ...

  6. docker 部署 nginx+php+mysql

    系统:centos7 使用root账户 开放80端口 firewall-cmd --zone=public --add-port=80/tcp --permanent 安装docker yum ins ...

  7. Smokeping配置调整

    smokeping两种邮件报警方式 一 .自带sendmail报警 修改这两句话to = 收件邮箱,多个逗号分隔from = smokealert@本机IP /usr/local/smokeping/ ...

  8. POJ 1745 【0/1 背包】

    题目链接:http://poj.org/problem?id=1745 Divisibility Time Limit: 1000MS   Memory Limit: 10000K Total Sub ...

  9. Makefile的变量赋值和函数

    在Makefile中的定义的变量,就像是C/C++语言中的宏一样,他代表了一个文本字串,在Makefile中执行的时候其会自动原模原样地 展开在所使用的地方.其与C/C++所不同的是,你可以在Make ...

  10. 【洛谷P2831】[NOIP2016]愤怒的小鸟

    愤怒的小鸟 题目链接 本来是刷状压DP的,然而不会.. 搜索是比较好想的,直接dfs就行了 我们可以知道两只猪确定一条抛物线 依次处理每一只猪,有以下几种方法: 1.先看已经建立的抛物线是否能打到这只 ...