官网上解释:一个路由对象表示当前激活的路由的状态信息

路由对象,在组件内即this.$route,存着一些与路由相关的信息,当路由切换时,路由对象会被更新

//如果要在刷新页面时候通过路由的信息来操作数据,可以在created下使用this.$route 这个属性

$route.name 

当前路由的名称,如果没有使用具名路径,则名字为空

$route.path

字符串,等于当前路由对象的路径,会被解析为绝对路径

一般为#后面的部分,但不包含query查询值

如:

http://example.com/#/login?name=aa
this.$route.path;    //输出“/login”

$route.fullPath

完成解析后的URL路径,包括查询信息和hash的完整路径

http://example.com/#/login?name=aa
this.$toute.fullPath;    //输出“/login?name=aa”

 $route.meta

在路由里面埋一个字段,当切换路由时候把信息传过去

在meta对象中可以设置一些状态,来进行一些操作(比如做登录校验)

{
path: '/actile',
name: 'Actile',
component: Actile,
meta: {
login_require: false
},
},
{
path: '/goodslist',
name: 'goodslist',
component: Goodslist,
meta: {
login_require: true
},
children:[
{
path: 'online',
component: GoodslistOnline
}
]
}
//只需要判断item下面的meta对象中的login_require是不是true,就可以做一些限制操作
router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.meta.login_require
})) {
next('/login')
} else
next()
})

 $route.matched

一个数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象,从父路由(如果有)到当前路由为止

$route.query 

查询信息包含路由中查询参数的键值对

如:

this.$router.push({name: 'login', query:{name: 'you'}})

此时路由为

http://example.com/#/login?name=you
this.$route.query.name; //输出you

$route.hash

当前路径的哈希值,带#

$route.params

预设的变量(设了之后可以取),切换时候,通过parmas带过去某个id的值

如果使用params,就不能定义path,改为name来引用

$route.redirectedFrom

重定向。如果存在重定向,即为重定向来源的路由名字

如:

{ path: '*',redirect: {name: 'hello'}}

此时访问不存在的路由http://example.com/#/a会重定向到hello

在hello访问

this.$route.redirectedFrom;    //输出“/a”

vue常用的路由对象的更多相关文章

  1. vue常用

    vue常用的路由的状态管理

  2. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

  3. vue 路由对象(常用的)

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

  4. vue路由对象($route)参数简介

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

  5. vue 路由对象

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

  6. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  7. Vue常用性能优化

    Vue常用性能优化 Vue常用的一些优化方式,主要是在构建项目过程需要注意的方面. 编码优化 避免响应所有数据 不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并 ...

  8. vue.js之路由

    Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管 ...

  9. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

随机推荐

  1. 【BZOJ5336】[TJOI2018]party(动态规划)

    [BZOJ5336][TJOI2018]party(动态规划) 题面 BZOJ 洛谷 题解 这题好神仙啊... 考虑普通的\(LCS\)的\(dp\),\(f[i][j]=\max\{f[i-1][j ...

  2. 【UOJ#422】【集训队作业2018】小Z的礼物(min-max容斥,轮廓线dp)

    [UOJ#422][集训队作业2018]小Z的礼物(min-max容斥,轮廓线dp) 题面 UOJ 题解 毒瘤xzy,怎么能搬这种题当做WC模拟题QwQ 一开始开错题了,根本就不会做. 后来发现是每次 ...

  3. 「SCOI2016」围棋 解题报告

    「SCOI2016」围棋 打CF后困不拉基的,搞了一上午... 考虑直接状压棋子,然后发现会t 考虑我们需要上一行的状态本质上是某个位置为末尾是否可以匹配第一行的串 于是状态可以\(2^m\)压住了, ...

  4. linux(fedora) 第二课

    vi 文件名(一般模式 编辑模式 命令模式) 一般模式 (不可编辑 按 a,i,o可以切换为编辑模式): 1.删除n行:按下想删除的行数+dd 编辑模式(编辑模式 可以浏览,查找,编辑 按‘:” 可以 ...

  5. spring boot 连接mysql mongodb with jpa

    https://github.com/bigben0123/gs-accessing-data-mysql-mongo-jpa

  6. A1137. Final Grading

    For a student taking the online course "Data Structures" on China University MOOC (http:// ...

  7. 斯坦福大学公开课机器学习: neural networks learning - autonomous driving example(通过神经网络实现自动驾驶实例)

    使用神经网络来实现自动驾驶,也就是说使汽车通过学习来自己驾驶. 下图是通过神经网络学习实现自动驾驶的图例讲解: 左下角是汽车所看到的前方的路况图像.左上图,可以看到一条水平的菜单栏(数字4所指示方向) ...

  8. 【精】搭建redis cluster集群,JedisCluster带密码访问【解决当中各种坑】!

    转: [精]搭建redis cluster集群,JedisCluster带密码访问[解决当中各种坑]! 2017年05月09日 00:13:18 冉椿林博客 阅读数:18208  版权声明:本文为博主 ...

  9. javase的网络编程(InetAddress,UDP,TCP,URL,Socket,DatagramSocket)

    通过一段时间对java网络编程相关内容的学习,写下这篇随笔,对这一部分的知识进行梳理和总结. 网络编程 一.网络编程三要素: IP地址:网络会给每个联网的主机分配一个数字的编码地址,该地址就是IP地址 ...

  10. jenkins学习:jenkins+maven

    之前配置了jenkins+gitlab,jenkins已经可以从gitlab上面拉取代码了,执行项目构建还要加一个maven. 1.配置全局的maven 系统管理-全局工具配置-配置maven的地址 ...