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
当前路径的名字,如果没有使用具名路径,则名字为空。
在页面上添加以下代码,可以显示这些路由对象的属性:
<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路由对象($route)参数简介的更多相关文章
- Vue 路由规则--传参数
1,query方法去获取参数 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue 路由对象
路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
- VUE路由携带参数的三种方式
vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...
- vue设置路由跳转参数,以及接收参数
最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link :to ...
- Vue路由获取路由参数
vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录&l ...
- Vue路由规则中定义参数
Vue使用routerLinke定义参数的时候 路由规则中不需要更改任何属性. 路由其实就是我们在html中定义的锚点,点击这个连接跳转一个锚点.vue中的路由也是这个原理, 前提是路由必须创建在实 ...
- Vue路由参数
vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...
- vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数
vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...
随机推荐
- 小白的Python之路 day1 表达式if ... else ,while循环,for循环
表达式if ... else 一.用户登陆验证 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 # 提示输入用户名和密码 # 验 ...
- springboot 结合mybatis
MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML ...
- Python学习日记:day8-------文件操作
文件操作 1,文件路径:d:\xxxx.txt 绝对路径:从根目录到最后 相对路径:当前目录下的文件 2,编码方式:utf-8 3,操作方式:只读,只写,追加,读写,写读...... ...
- ubuntu下加载mcypt
mcrypt 是php 里面重要的加密支持扩展库,linux环境下:该库在默认情况下不开启.window环境下:PHP>=5.3,默认开启mcrypt扩展 1.命令行下载(不嫌麻烦可以到网上找安 ...
- 微信扫码支付功能详细教程————Java
前言 首先声明 我并非原创 原创是 http://blog.csdn.net/wangqiuyun/article/details/51241064 我只是在前辈的基础 加以解释说明 还有自己的一些 ...
- linux下配置Tomcat开机启动
我们在linux下安装好tomcat之后:经常是需要配置到开机启动的: 这样的话就不需要我们每次重启linux服务器之后自己在登陆运行startup.sh文件启动tomcat了 本次的演示环境是在ce ...
- python如何进行内存管理
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 语言的内存管理是语言设计的一个重要方面.它是决定语言性能的重要因素.无论是C语言的 ...
- Windows下使用OpenSSL生成自签证书
下载OpenSSLhttp://slproweb.com/products/Win32OpenSSL.html 生成证书 生成crt证书CMD进入安装bin目录,执行命令:openssl req -x ...
- Nifi自定义processor
有关nifi的基本介绍和架构可以参考nifi官网 一下介绍nifi的一些比较重要的类和自己的一些理解,我刚刚接触nifi: nifi的数据流可以表示为一个flow这是一个队列,每个数据包被封装在flo ...
- linux 下安装 sphinx 服务器
准备工作:安装需要的扩展文件 yum install make gcc g++ gcc-c++ libtool autoconf automake imake libxml2-devel expat- ...