---

Vue Router 版本号为 v3.x

1、区别

用一句话来概括这两个区别就是 route 是用来获取路由信息的，router是用来操作路由的。

2、route

2.1、什么是 route

一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。

路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。

2.2、路由属性

2.2.1、path

字符串，对应当前路由的路径，总是解析为绝对路径，如 “/about”。

2.2.2、params

一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。换句话说就是通过 params 传递的参数。

2.2.3、query

一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。也包括通过 query
传递的参数。

2.2.4、hash

当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

2.2.5、fullPath

完成解析后的 URL，包含查询参数和 hash 的完整路径。

2.2.6、matched

一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

const router = new VueRouter({routes: [// 下面的对象就是路由记录{path: '/foo',component: Foo,children: [// 这也是个路由记录{ path: 'bar', component: Bar }]}]
})

当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。

2.2.7、name

当前路由的名称，如果有的话。

2.2.8、redirectedFrom

如果存在重定向，即为重定向来源的路由的名字。

2.2.9、meta

路由元信息

2、router

2.1、什么是 router

router 是全局路由的实例，是 router 构造方法的实例。

2.2、实例属性

2.2.1、app

配置了 router 的 Vue 根实例。

2.2.2、apps

Vue 根实例数组

2.2.3、mode

路由使用的模式。

2.2.4、currentRoute

当前路由对应的路由信息对象（route）。

2.2.5、START_LOCATION

以路由对象的格式展示初始路由地址，即路由开始的地方。可用在导航守卫中以区分初始导航。

import VueRouter from 'vue-router'const router = new VueRouter({// ...
})router.beforeEach((to, from) => {if (from === VueRouter.START_LOCATION) {// 初始导航}
})

2.2.6、afterHooks

2.2.7、beforeHooks

2.2.8、resolveHooks

2.2.9、fallback

2.2.10、history

HTML5History

2.2.11、matcher

addRoute
addRoutes
getRoutes
match
这几个方法的对象

2.2.12、options

创建 Router 时传递的原始配置对象。只读的。

2.3、实例方法

2.3.1、路由守卫

增加全局的导航守卫

在 2.5.0+ 下面这三个方法都返回一个移除已注册的守卫/钩子的函数。

beforeEach

beforeResolve

afterEach

2.3.2、路由跳转

动态的导航到一个新 URL。

下面这些函数仅在安装路由插件并将其传递给 Vue 根实例后调用。

push

向 history 栈中添加一个路由

函数签名：

router.push(location, onComplete?, onAbort?)

该方法的第一个参数可以是一个字符串路径，或者一个描述地址的对象。

可选的在 router.push 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace 将返回一个 Promise。

replace

替换路由，没有历史记录

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

go

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

back

这个方法的参数是空，意思是在 history 记录中后退1步

forward

这个方法的参数是空，意思是在 history 记录中向前1步

2.3.3、getMatchedComponents

函数签名：

const matchedComponents: Array<Component> = router.getMatchedComponents(location?)

返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类，不是实例)。通常在服务端渲染的数据预加载时使用。

2.3.4、resolve

函数签名：

const resolved: {location: Location;route: Route;href: string;
} = router.resolve(location, current?, append?)

解析目标位置 (格式和 <router-link> 的 to prop 一样)。

current 是当前默认的路由 (通常你不需要改变它)
append 允许你在 current 路由上附加路径 (如同 router-link)

2.3.5、addRoutes

已废弃：使用 addRoute() 代替。

2.3.6、addRoute

添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

函数签名:

addRoute(route: RouteConfig): () => void

2.3.7、addRoute

添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

函数签名:

addRoute(parentName: string, route: RouteConfig): () => void

2.3.8、getRoutes

获取所有活跃的路由记录列表。注意只有文档中记录下来的 property 才被视为公共 API，避免使用任何其它 property，例如 regex，因为它在 Vue Router 4 中不存在。

函数签名:

getRoutes(): RouteRecord[]

2.3.9、onReady

函数签名：

router.onReady(callback, [errorCallback])

该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。

这可以有效确保服务端渲染时服务端和客户端输出的一致。

第二个参数 errorCallback 只在 2.4+ 支持。它会在初始化路由解析运行出错 (比如解析一个异步组件失败) 时被调用。

2.3.10、onError

函数签名：

router.onError(callback)

注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：

错误在一个路由守卫函数中被同步抛出；

错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；

渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。

2.3.11、init

2.3.12、match

上述方法或属性未注明的，博主也暂时不清楚，还请各位大佬在评论区给出解释。谢谢

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Vue Router系列之 route 和 router 的区别相关推荐

1. html meta 跳转 白屏,vue使用keepAlive之后页面空白白屏？route和router什么区别呢？...

   问题描述: vue使用keepAlive之后页面空白,报错:TypeError: Cannot read property 'keepAlive' of undefined... 为了实现页面跳转之后 ...

2. vue 传递 对象 路由_vue 04 -vue路由对象（$route）参数简介以及和router的区别

   vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...

3. vue中的this.$route和this.$router

   我们在进行vue项目开发的时候,难免会用到vue-router,通过新建vue-rouer对象,能够方便我们对路由进行配置. 在使用的过程中经常需要使用this. $ router 和this.$ro ...

4. vue中Route和router、routes的关系

   一.Route和router.routes的关系 事例展示 1.Router:一般具有功能性 2.route route一般用于获取信息 例如获取 -路由路径($route.path) -路由参数($ ...

5. Vue中route和router的区别

   route 和 router route 包含路由信息的对象 如图所示:fullPath hash name - router 可以理解为操作路由的方法,包含了如:histroy 和一些生命钩子函数- ...

6. vue项目创建步骤 和 路由router知识点

   菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...

7. id vue2路由传参_Vue2.0中 $route 和 $router 的区别

   在做Vue项目时,在路由设置和跳转时有没有遇到过 $route 和 $router?乍一看,两个看起来几乎一模一样,有点傻傻分不清楚,他们到底有什么区别?在什么情况下用呢? 我们把这2个在控制台打印出 ...

8. nuxt.js 的router作用解说：使用，自定义extendRoutes配置，route和router区别

   nuxt的router是自动生成的,不需要配置router,然后下面介绍的就是基础的使用,特殊的个性化自定义的配置,然后router和route的常用易混淆的解说 # 一:基础的使用 要在页面使用路由 ...

9. $route和$router的区别

   1.$router是用来操作路由,$route是用来获取路由信息 2.$router是VueRouter的一个实例,他包含了所有的路由,包括路由的跳转方法,钩子函数等,也包含一些子对象(例如histo ...

10. 创建Vue项目，找不到router文件（router.js）的解决方法

    创建Vue项目,找不到router文件(router.js)的解决方法 问题描述: 安装 Vue Router 原因分析: 解决方案: 命令窗口创建 使用图形化界面 问题描述: 如图所示: 安装 Vu ...

最新文章

1. 【转载】解决refreshing gradle project 和Building gradle project info 一直卡住\速度慢
2. 如何判断字符串所用何种加密编码
3. CTFshow 信息收集 web20
4. vuex的结构有哪些参数？
5. 关于51CTO民意调查之自主添加google广告代码的几点意见
6. IT行业必须知道的基础知识
7. XPS是什么格式？如何免费转换为word?
8. java find symbol,cannot find symbol
9. 把之前写的一个小东西代码分享出来
10. 数据文件检验坏块的利器-dbv
11. 无爬虫团队，企业如何实现1000万级数据采集？
12. 高数：第四章（同济大学第七版）
13. “蓝色巨人”转向，极氪会是吉利的一剂“良药”吗？
14. ADI Blackfin DSP处理器-BF533的开发详解60：DSP控制ADXL345三轴加速度传感器-电子水平仪（含源码）
15. 4t硬盘实际容量是多少_4t硬盘分区多大合适_4tb硬盘分区多少合适-win7之家
16. JSX语法使用详解——终极版
17. win7网站服务器空间怎么清理,window_Win7系统如何清理C盘空间？Win7系统清理C盘空间小技巧，　　Win7系统清理C盘空间小技 - phpStudy...
18. 一起来看流星雨--------魏晨
19. Java Date 24小时制和12小时制
20. 思科网络技术学院2002年会（上）(转)

热门文章

1. pyspark 解决数据倾斜demo（两端聚合)（全网之最）
2. github上成员贡献量_精确统计github贡献者的代码行数
3. 独孤求败，未必就是王者：CloudStack和Eucalyptus已去，OpenStack赢了吗？
4. Arduino环境使用TM1638扩展版
5. 计算机桌面黑屏有鼠标,电脑黑屏只有鼠标怎么办
6. JQ siblings()方法 原生 js 获取所有兄弟节点
7. 百度地图(地图生成)
8. 联想小新Win11系统如何将新建标签页设置为Edge浏览器首页
9. 大数据可视化设计师丹尼斯_自助数据可视化设计师如何谋生
10. 深度学习Course4第三周Detection Algorithms习题整理