vue常用的路由对象
官网上解释:一个路由对象表示当前激活的路由的状态信息
路由对象,在组件内即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常用的路由对象的更多相关文章
- vue常用
vue常用的路由的状态管理
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
- vue 路由对象(常用的)
路由对象 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. 路由对象暴露了以下属性: $route.path ...
- vue路由对象($route)参数简介
路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...
- vue 路由对象
路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- Vue常用性能优化
Vue常用性能优化 Vue常用的一些优化方式,主要是在构建项目过程需要注意的方面. 编码优化 避免响应所有数据 不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并 ...
- vue.js之路由
Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管 ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
随机推荐
- linux 开放80端口
必须确保两块都开放 1.云服务器-->安全组开放 比如百度云服务器: 2.linux内置防火墙开放 注意:此处如果不设置开放,即时云端开放了也没用,如果同时存在 80 (拒绝) 80(允许) ...
- Fiddler中显示IP方法
如何在fiddler查看到请求的IP地址?就像下面这样 打开fiddler, 快捷键Ctrl+R 或者 菜单->Rules->Customize Rules…,然后在CustomRul ...
- [luogu3878][TJOI2010]分金币【模拟退火】
题目描述 现在有n枚金币,它们可能会有不同的价值,现在要把它们分成两部分,要求这两部分金币数目之差不超过1,问这样分成的两部分金币的价值之差最小是多少? 分析 根据模拟退火的基本套路,先随机分两堆金币 ...
- PHP慢日子查询
2开启慢日志配置输出php-fpm慢日志,阀值为2秒:request_slowlog_timeout = 2slowlog = log/$pool.log.slow利用sort/uniq命令分析汇总p ...
- 整车CAN网络介绍
CAN(Controller Area Network)控制器局域网络,CAN网络在早期的整车应用中以BCM(车身控制器)为控制中心,主要是车身零部件(雨刮/大灯/车窗…),智能硬件较少,所以早期的正 ...
- Python之面向对象编程学习
不知不觉,学到了python的面向对象编程思想.今天我们来讨论下面向对象编程的思想. 顾名思义,面向对象,就是面向于对象,这里所说的对象不是你现实生活中你的女朋友,你的老婆,你的爱人,在编程的世界里面 ...
- jsp (1)
一.jsp介绍: jsp是servlet的一种包装.是html+js+css+servlet. jsp文件无需配置,如果修改了jsp文件不需要reload应用. jsp访问方法:直接访问文件名.jsp ...
- Electron一学习资源收集和练习demo
1.近日为了做项目查资料学习electron,简直头都要炸了,就官方的electron-quick-start的例子进行了基本的练习之后,不断的查资料终于发现一些有用的demo来看源代码学习,一遍看代 ...
- java利用线程池处理集合
java利用线程池处理集合 2018年07月23日 17:21:19 衍夏成歌 阅读数:866 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/s ...
- UltraCompare文件内容比较工具
http://www.52pojie.cn/thread-541895-1-1.html 云盘里有<ignore_js_op> <ignore_js_op> UltraComp ...