路由对象
在使用了 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)参数简介的更多相关文章

  1. Vue 路由规则--传参数

    1,query方法去获取参数 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. vue 路由对象

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

  3. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

  4. VUE路由携带参数的三种方式

    vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...

  5. vue设置路由跳转参数,以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  6. Vue路由获取路由参数

    vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录&l ...

  7. Vue路由规则中定义参数

    Vue使用routerLinke定义参数的时候  路由规则中不需要更改任何属性. 路由其实就是我们在html中定义的锚点,点击这个连接跳转一个锚点.vue中的路由也是这个原理, 前提是路由必须创建在实 ...

  8. Vue路由参数

    vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...

  9. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

随机推荐

  1. wordpess关闭评论的方法,wordpress开发

    由于某种原因,需要把wordpress的评论关闭,下面讲一下方法. 在wordpress模板中,找到文章模板页面文件single.php,在里面找到 <?php comments_templat ...

  2. 「mysql优化专题」你们要的多表查询优化来啦!请查收(4)

    一.多表查询连接的选择: 相信这内连接,左连接什么的大家都比较熟悉了,当然还有左外连接什么的,基本用不上我就不贴出来了.这图只是让大家回忆一下,各种连接查询. 然后要告诉大家的是,需要根据查询的情况, ...

  3. 老生常谈之Block

    前面有一篇介绍Block的博客,主要介绍了Block的简单使用技巧.这篇博客主要更加深入地了解一下Block.包括:Block的实现.__Block的原理以及Block的存储域三方面. Block的实 ...

  4. git的merge功能

    merge功能是将一些分支的内容合并到某一个特定的分支,这里我为了测试下,在阿里云code上面新建了一个项目 现在我需要将dev分支merge到主分支master 开发者和管理员都有权发起merge请 ...

  5. JSON--stringify() 和 parse() 方法

    序列化:stringify()将JavaScript对象序列号为JSON字符串反序列化:parse()将JSON字符串解析为原生JavaScript值 序列化选项:JSON.stringify()除了 ...

  6. 历史命令~/.bash_history,查看所有别名alias,命令执行顺序,命令行常用快捷键,输入输出重定向,wc统计字节单词行数

    历史命令大小:/etc/profile中字段HISTSIZE=1000 历史命令保存文件:~/.bash_history history -c 清空历史命令 history -w 把历史命令写入~/. ...

  7. 【java设计模式】【行为模式Behavioral Pattern】策略模式Strategy Pattern

    package com.tn.策略模式; public class Client { private Strategy strategy; public void setStrategy(Strate ...

  8. 转:Siri之父:语音交互或将主导未来十年发展

    http://zhinengjiaohu.juhangye.com/201709/weixin_5664458.html Siri之父Adam Cheyer认为,语音交互很可能是未来十年内计算技术的一 ...

  9. Mockplus设计大赛获奖选手专访 | High音:轻松生活,随心嗨音

    "看似低调,实则高调的设计,UI设计是用了功力,主页功能和内容一览无余,方便用户选择,金字黑底,给予用户极好的奢华体验.原来听歌也是一种视觉享受.创新性源于对听歌氛围的把握,大幅的图片,刺激 ...

  10. 关于文件上传的ajax交互

    首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型 后缀名 MIME名称 *.3gpp audio/3gpp, vid ...