$route与$router与routes三者都是什么?

149 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第8天,点击查看活动详情

1.routeroute与router还有routers都是什么?

众所周知Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举

功能包括:

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

但是routeroute与router与routes都是些什么呢?有什么区别?且听我娓娓道来

1.routeroute和router

2.png 通过控制台打印,可以看出来,route其实是一个对象,这里面包含了很多路由信息,包括‘path,hash,query,fullPath,matched,name等等一些路由信息的参数

接下来看看$router打印出来了什么?

3.png 可以看到$router包含很多属性和方法,如此一来答案便呼之欲出了:

routerrouter比route要牛一点........(多了个r就是牛一点?)

4.png

还真是!敲黑板 $route是一个局部的路由对象,只能用于当前跳转的路由

而$router是一个全局的实例对象

包括了路由的跳转方法比如push(跳转页面)replace(替换页面),go(页面的前进或者后退)

任何页面都可以调用!

实际开发中因vue-router提供了一个全局组件router-link来替代a标签进行跳转,自带激活时的类名, 通常我们都是用来做点击高亮功能,只需写高亮样式即可

3.routes

router是一条路由,单数的

而routes是多个路由的集合,多个数组的集合

创建vue-router路由实例的配置项。用来配置多个route路由对象