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几个属性涉及到路由参数传递:传送门:路由参数传递

参考文章

随机推荐

  1. P6880-[JOI 2020 Final]オリンピックバス【最短路】

    正题 题目链接:https://www.luogu.com.cn/problem/P6880 题目大意 给出\(n\)个点\(m\)条边的有向图,边有边权和一个翻转权值. 翻转至多一条边使得\(1-& ...

  2. YbtOJ#631-次短路径【左偏树,最短路】

    正题 题目链接:https://www.ybtoj.com.cn/contest/114/problem/1 题目大意 给出\(n\)个点\(m\)条边的一张无向图,对于每个点\(i\)求不经过\(i ...

  3. Python读取ini配置文件(接口自动测试必备)

    前言 大家应该接触过.ini格式的配置文件.配置文件就是把一些配置相关信息提取出去来进行单独管理,如果以后有变动只需改配置文件,无需修改代码. 特别是后续做自动化的测试,代码和数据分享,进行管理.比如 ...

  4. kubectl 的插件管理工具krew

    k8s的命令行工具kubectl 对于玩k8s 的人来说是必备工具.kubectl插件机制在Kubernetes 1.14宣布稳定,进入GA状态.kubectl的插件机制就是希望允许开发者以独立的二进 ...

  5. 轻松集成腾讯云短信服务实现短信发送(Java实现)

    不论是阿里云还是腾讯云,要想在网站上实现短信发送功能,首先得保证你的网站域名是通过备案的,因为短信签名是需要用到备案过的域名截图,所以域名通过了,申请很快就会审批成功了. (说点题外话,备案的话,需要 ...

  6. NOIP 模拟六 考试总结

    T1辣鸡 T1就搞得这莫不愉快.. 大致题意是给你几个矩形,矩形覆盖的点都标记上,每个矩形无重复部分,求满足(x,y) (x+1,y+1)都标记过的点对数,范围1e9. 看起来很牛的样子,我确实也被1 ...

  7. IDEA破解方法:重新刷新到30天【支持正版】

    IDEA破解方法:重新刷新到30天[支持正版] 步骤: 导入plugins.zhile.io 进入File-->Settings-->Plugins 点设置(齿轮符号)-->Mana ...

  8. Unity——FSM有限状态机

    FSM有限状态机 一.设计思路 1.共同的状态父类,提供可重写的进入,保持,退出该状态的生命周期方法: 2.状态机,管理所有状态(增删查改),状态机运行方法(Run): 3.在角色控制器中,实例化状态 ...

  9. Jekins 插件Extended Choice Parameter显示Json Parameter Type遇到的问题

    在jenkins中使用Extended Choice Parameter插件用来显示自定义的多选项,尝试通过groovy script来显示,正常,但查看它的例子,发现它例子中多选是通过类型 Json ...

  10. this指向与call,apply,bind

    this指向与call,apply,bind ❝ 「this」问题对于每个前端同学来说相信都不陌生,在平时开发中也经常能碰到,有时候因为「this」还踩过不少坑,并且「this」问题在面试题中出现的概 ...