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. 《如何进行接口mock测试》

    前言: Mock通常是指:在测试一个对象时,我们构造一些假的对象来模拟与其交互.而这些Mock对象的行为是我们事先设定且符合预期.通过这些Mock对象来测试对象在正常逻辑,异常逻辑或压力情况下工作是否 ...

  2. js正则常用方法

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3 ...

  3. 安卓模拟器genymotion安装

    上一篇已经讲了appium的搭建.那么搭建好后,我们需要测试不同机型,这个时候除了真机外,可以选择安装模拟器.市面上的模拟器有很多:夜神.逍遥.mumu.android emulator.genymo ...

  4. P5445-[APIO2019]路灯【set,树状数组套线段树】

    正题 题目链接:https://www.luogu.com.cn/problem/P5445 题目大意 \(n+1\)个点,\(i\)和\(i+1\)个点之间有一条边,\(q\)个操作 断开/连接第\ ...

  5. JDBC连接mariadb时使用依赖

    问题描述:最近在尝试使用mariadb,使用idea开发,在使用jdbc连接数据库的时候,一般会用到driver,user,pwd,url,使用mysql的例子太多了,也有很多详细的教程,但是现在尝试 ...

  6. AtCoder Beginner Contest 221 A~E题解

    目录 A - Seismic magnitude scales B - typo C - Select Mul D - Online games E - LEQ 发挥比较好的一场,就来搓篇题解. F ...

  7. 为什么'\x1B'.length===1?\x与\u知识延伸

    背景 先讲一下背景,再说原因 大多数库都会在日志中使用chalk库为console的内容进行上色 被chalk处理后,其原本的内容会被'\x1B...'所包裹 console.log(chalk.bl ...

  8. Redis的单线程架构

    前言 在一定的策略下适度地初始化线程池的线程数有利于提高CPU的利用率,达到高效率地在同一段时间内处理多个任务,最佳的线程数量一般是 最佳线程数=(线程等待的时间与线程CPU执行时间之比+1)*CPU ...

  9. 如何在 Serverless K8s 集群中低成本运行 Spark 数据计算?

    作者 | 柳密 阿里巴巴阿里云智能 ** 本文整理自<Serverless 技术公开课>,关注"Serverless"公众号,回复"入门",即可获取 ...

  10. WPF之资源专题

    1.一般程序的资源可以分为四个等级: 数据库中的数据相当于放在仓库里 资源文件里的数据相当于放在旅行箱里 WPF对象资源里的数据相当于携带在背包里 变量中的数据相当于拿在手里 2.资源的查找顺序是沿着 ...