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之后 ...
随机推荐
- MT【246】方程根$\backsim$图像交点
已知函数$f(x)=x^2+x-2$,若$g(x)=|f(x)|-f(x)-2mx-2m^2$ 有三个不同的零点,则$m$的取值范围_____ 分析:等价于$h(x)=|f(x)|-f(x),t(x) ...
- Install Nagios (Agent) nrpe client and plugins in Ubuntu/Debian
安装apt-get install nagios-nrpe-server nagios-plugins 修改nrpe.cfgvi /etc/nagios/nrpe.cfg修改Allow Host,添加 ...
- Android assets res 文件夹的区别
大家都知道建立一个Android项目后会产生assets与res的两个文件夹,理论上他们都是存放资源的文件夹,那么他们到底有什么区别呢? 1.assets:不会在R.java文件下生成相应的标记,存放 ...
- AES解密后多了\0
AES加密解密之后发现多了几个空格,不知道原因.在调试时发现多了\0这种东西 不知道为什么会多这些.后来.replace("\0","")这样做了事
- [FJOI2015]火星商店问题(分治+可持久化)
题目描述 火星上的一条商业街里按照商店的编号1,2 ,…,n ,依次排列着n个商店.商店里出售的琳琅满目的商品中,每种商品都用一个非负整数val来标价.每个商店每天都有可能进一些新商品,其标价可能与已 ...
- 单片机pwm控制基本原理详解
前言 PWM是Pulse Width Modulation的缩写,它的中文名字是脉冲宽度调制,一种说法是它利用微处理器的数字输出来对模拟电路进行控制的一种有效的技术,其实就是使用数字信号达到一个模拟信 ...
- mysql5.6更改datadir数据存储目录
环境需求: 有些数据存储场景可能需要将数据放到指定的挂载路径或目录,mysql默认存放数据路径在:/var/lib/mysql下. 测试环境: 操作步骤: 1. 查看当前存储目录 [root@mysq ...
- JetBrains全家桶破解思路(最新更新:2019-04-17)
JetBrains全家桶破解思路(以DataGrip为例) 2019-04-17 add new key 2019-01-24 add new key and code 2018-12-24 add ...
- 项目部署之nginx实现PC端和移动端自动跳转
假设PC端域名为 www.abc.com 移动端域名为m.abc.com PC端nginx配置文件server中加入如下代码: if ($http_host !~ "^www.abc ...
- webpack入门(五)webpack CLI
webpack的CLI安装和命令 Installation $ npm install webpack -g The webpack command is now available globally ...