路由对象
在使用了 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. [笔记]使用Keepalived实现Nginx主从热备

    HA(High Available), 高可用性集群,是保证业务连续性的有效解决方案,一般有两个或两个以上的节点,且分为活动节点及备用节点. 1.1. 高可靠软件keepalived keepaliv ...

  2. OPENSHIFT V3 免费部署 Java-Web

    OpenShift是红帽的云开发平台即服务(PaaS).自由和开放源码的云计算平台使开发人员能够创建.测试和运行他们的应用程序,并且可以把它们部署到云中.Openshift广泛支持多种编程语言和框架, ...

  3. 《调试九法——软硬件错误的排查之道》【PDF】下载

    <调试九法--软硬件错误的排查之道>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196352 内容简介 <调试九法:软硬件错 ...

  4. IOS学习5——属性与成员变量

    [转]iOS中属性与成员变量的区别 ios中属性修饰符的作用 1. 属性用property声明 2. 简而言之,对于目前的ios开发,属性和成员变量的区别,完全可以不管. 3. 这个是历史原因造成的. ...

  5. 【Hdu2089】不要62(数位DP)

    Description 题目大意:给定区间[n,m],求在n到m中没有"62"或"4"的数的个数. 如62315包含62,88914包含4,这两个数都是不合法的 ...

  6. Visual Studio Code 快捷键大全(Windows)

    Visual Studio Code 是一款优秀的编辑器,非常适合编写 TS 以及 React .最近在学习 AngularJs 2,开始使用 VSCode,特意整理翻译了一下官网的快捷键.因为已经习 ...

  7. Panel控件的使用

    我们对控件进行分组的原因不外乎三个: 1.为了获得清晰的用户界面而将相关的窗体元素进行可视化分组. 2.编程分组,如对单选按钮进行分组. 3.为了在设计时将多个控件作为一个单元来移动. 在vb.net ...

  8. arcgis api for js入门开发系列十六迁徙流动图

    最近公司有个arcgis api for js的项目,需要用到百度echarts迁徙图效果,而百度那个效果实现是结合百度地图的,怎么才能跟arcgis api结合呢,网上搜索,终于在github找到了 ...

  9. nginx在 window下 自动退出 php-cgi

    win32+nginx+php自动挂掉php-cgi.exe    RunHiddenConsole E:/wnmp/php5/php-cgi.exe -b 127.0.0.1:9000 -c &qu ...

  10. Linux根目录详解-转自鸟哥的私房菜

    转自:http://myhat.blog.51cto.com/391263/107931/   *根目录(/)的意义与内容: 根目录是整个系统最重要的一个目录,因为不但所有的目录都是由根目录衍生出来的 ...