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

路由对象,在组件内即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. Swarm平滑升级回滚

    #滚动更新创建服务: docker service create --name my_web --replicas=5 nginx:1.12更新为1.14 docker service update ...

  2. RabbitMQ图解

    一.MQ对比 二.RabbitMQ模式 三.队列模式 四.公平分发 五.主题模式

  3. [NOI2012]美食节(费用流)

    题目描述 CZ市为了欢迎全国各地的同学,特地举办了一场盛大的美食节.作为一个喜欢尝鲜的美食客,小M自然不愿意错过这场盛宴.他很快就尝遍了美食节所有的美食.然而,尝鲜的欲望是难以满足的.尽管所有的菜品都 ...

  4. Developing JSF applications with Spring Boot

    Developing JSF applications with Spring Boot Spring Boot can leverage any type of applications, not ...

  5. What can Reactive Streams offer EE4J?

    https://developer.lightbend.com/blog/2018-02-06-reactive-streams-ee4j/index.html By James Roper (@jr ...

  6. A1128. N Queens Puzzle

    The "eight queens puzzle" is the problem of placing eight chess queens on an 8×8 chessboar ...

  7. 第三十四篇-Palette(调色板)的使用

    由于屏幕录制图片转换关系,不甚清晰,还是附上效果图 可以看出,上面文字和背景颜色确实会根据图片的变化而变化. 里面有3个组件,toolbar,textview,imageview,其中textview ...

  8. jasperreport

     我们的报表要用FusionCharts.jasperreport

  9. Spring 学习笔记一

    1.IOC,DI. 2.装配bean基于xml(实例化,声明周期,后处理bean,属性注入).3.装配bean基于注解 1       spring框架概述 1.1   什么是spring l  Sp ...

  10. File的创建

    package cn.lijun.demo3; import java.io.File; import java.io.IOException; // 创建文件功能 如果文件已经存在 不再创建 pub ...