$router 和 $route的区别
router
router是VueRouter
的一个对象,通过Vue.use(VueRouter)
和VueRouter构造函数
得到一个router的实例对象,这个对象中是一个全局对象,他包含了所有的路由以及许多关键的对象和属性。
举例:history对象
$router.push({path:'home'})
本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录
$router.replace({path:'home'});//替换路由,没有历史记录
route
route
表示一个当前活跃的路由对象,每一个路由都会有一个route对象,是一个局部的对象,包含name,path,params,query
等属性,下面的例子就是一个route对象
{
path: 'table',
name: '讲师列表',
component: () => import('@/views/edu/teacher/list'),
meta: { title: '讲师列表', icon: 'table' }
},
我们可以从vue devtools中看到每个路由对象的不同
从上面的例子中可以看出两者的区别:
$route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,如"/home/news"
。$route.params
对象,包含路由中的动态片段和全匹配片段的键值对$route.query
对象,包含路由中查询参数的键值对。例如,对于/home/news/detail/01?favorite=yes
,会得到$route.query.favorite == 'yes'
。$route.router
路由规则所属的路由器(以及其所属的组件)。$route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。$route.name
当前路径的名字,如果没有使用具名路径,则名字为空。
route几个属性涉及到路由参数传递:传送门:路由参数传递
参考文章
随机推荐
- P6880-[JOI 2020 Final]オリンピックバス【最短路】
正题 题目链接:https://www.luogu.com.cn/problem/P6880 题目大意 给出\(n\)个点\(m\)条边的有向图,边有边权和一个翻转权值. 翻转至多一条边使得\(1-& ...
- YbtOJ#631-次短路径【左偏树,最短路】
正题 题目链接:https://www.ybtoj.com.cn/contest/114/problem/1 题目大意 给出\(n\)个点\(m\)条边的一张无向图,对于每个点\(i\)求不经过\(i ...
- Python读取ini配置文件(接口自动测试必备)
前言 大家应该接触过.ini格式的配置文件.配置文件就是把一些配置相关信息提取出去来进行单独管理,如果以后有变动只需改配置文件,无需修改代码. 特别是后续做自动化的测试,代码和数据分享,进行管理.比如 ...
- kubectl 的插件管理工具krew
k8s的命令行工具kubectl 对于玩k8s 的人来说是必备工具.kubectl插件机制在Kubernetes 1.14宣布稳定,进入GA状态.kubectl的插件机制就是希望允许开发者以独立的二进 ...
- 轻松集成腾讯云短信服务实现短信发送(Java实现)
不论是阿里云还是腾讯云,要想在网站上实现短信发送功能,首先得保证你的网站域名是通过备案的,因为短信签名是需要用到备案过的域名截图,所以域名通过了,申请很快就会审批成功了. (说点题外话,备案的话,需要 ...
- NOIP 模拟六 考试总结
T1辣鸡 T1就搞得这莫不愉快.. 大致题意是给你几个矩形,矩形覆盖的点都标记上,每个矩形无重复部分,求满足(x,y) (x+1,y+1)都标记过的点对数,范围1e9. 看起来很牛的样子,我确实也被1 ...
- IDEA破解方法:重新刷新到30天【支持正版】
IDEA破解方法:重新刷新到30天[支持正版] 步骤: 导入plugins.zhile.io 进入File-->Settings-->Plugins 点设置(齿轮符号)-->Mana ...
- Unity——FSM有限状态机
FSM有限状态机 一.设计思路 1.共同的状态父类,提供可重写的进入,保持,退出该状态的生命周期方法: 2.状态机,管理所有状态(增删查改),状态机运行方法(Run): 3.在角色控制器中,实例化状态 ...
- Jekins 插件Extended Choice Parameter显示Json Parameter Type遇到的问题
在jenkins中使用Extended Choice Parameter插件用来显示自定义的多选项,尝试通过groovy script来显示,正常,但查看它的例子,发现它例子中多选是通过类型 Json ...
- this指向与call,apply,bind
this指向与call,apply,bind ❝ 「this」问题对于每个前端同学来说相信都不陌生,在平时开发中也经常能碰到,有时候因为「this」还踩过不少坑,并且「this」问题在面试题中出现的概 ...