Skip to content

Latest commit

 

History

History
49 lines (42 loc) · 5.01 KB

$router和$route的区别.md

File metadata and controls

49 lines (42 loc) · 5.01 KB
Raw

$router和$route的区别

Vue Router是Vue.js的路由管理器，路由就是SPA单页应用的访问路径，在Vue实例内部，可以通过$router访问路由实例，即在路由定义文件中export default的new Router(/*...*/)路由实例，通过$route可以访问当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录，可以将$router理解为一个容器去管理了一组$route，而$route是进行了当前URL和组件的映射。

$router对象属性

  • $router.app: 配置了router的Vue根实例。
  • $router.mode: 路由使用的模式。
  • $router.currentRoute: 当前路由对应的路由信息对象。

$router对象方法

  • $router.beforeEach(to, from, next): 全局前置守卫，守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中状态，守卫方法接收三个参数: to: Route即将要进入的目标路由对象、from: Route: 当前导航正要离开的路由、next: Function: 调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数，例如next()、next(false)、next('/')、next({path:'/',name:'home',replace:true,query:{q:1}})、next(error)等，通常在main.js中import的Vue Router实例中直接定义导航守卫，当然也可在Vue实例中访问$router来定义。
  • $router.beforeResolve(to, from, next): 全局解析守卫，在beforeRouteEnter调用之后调用，同样接收to、from、next三个参数。
  • $router.afterEach(to, from): 全局后置钩子，进入路由之后调用，接收to、from两个参数。
  • $router.push(location[, onComplete[, onAbort]]): 编程式导航，使用$router.push方法导航到不同的URL，此方法会向history栈添加一个新的记录，当点击浏览器后退按钮时，则回到之前的URL。
  • $router.replace(location[, onComplete[, onAbort]]): 编程式导航，跟$router.push很像，唯一的不同就是，其不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录。
  • $router.go(n): 编程式导航，这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。
  • $router.back(): 编程式导航，后退一步记录，等同于$router.go(-1)。
  • $history.forward(): 编程式导航，前进一步记录，等同于$router.go(1)。
  • $router.getMatchedComponents([location]): 返回目标位置或是当前路由匹配的组件数组 ，是数组的定义或构造类，不是实例，通常在服务端渲染的数据预加载时使用。
  • $router.resolve(location[, current[, append]]): 解析目标位置，格式和<router-link>的to prop相同，current是当前默认的路由，append允许在current路由上附加路径，如同 router-link。
  • $router.addRoutes(route): 动态添加更多的路由规则，参数必须是一个符合routes选项要求的数组。
  • $router.onReady(callback[, errorCallback]): 该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件，这可以有效确保服务端渲染时服务端和客户端输出的一致，第二个参数errorCallback会在初始化路由解析运行出错时被调用。
  • $router.onError(callback): 注册一个回调，该回调会在路由导航过程中出错时被调用，被调用的错误必须是下列情形中的一种，错误在一个路由守卫函数中被同步抛出、错误在一个路由守卫函数中通过调用next(err)的方式异步捕获并处理、渲染一个路由的过程中需要尝试解析一个异步组件时发生错误。

$route对象属性

  • $route.path: 返回字符串，对应当前路由的路径，总是解析为绝对路径。
  • $route.params: 返回一个key-value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
  • $route.query: 返回一个key-value对象，表示URL查询参数。
  • $route.hash: 返回当前路由的带#的hash值，如果没有hash值，则为空字符串。
  • $route.fullPath: 返回完成解析后的URL，包含查询参数和hash的完整路径。
  • $route.matched: 返回一个数组，包含当前路由的所有嵌套路径片段的路由记录，路由记录就是routes配置数组中的对象副本。
  • $route.name: 如果存在当前路由名称则返回当前路由的名称。
  • $route.redirectedFrom: 如果存在重定向，即为重定向来源的路由的名字。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://router.vuejs.org/zh/api/#routes
https://juejin.im/post/6844903665388486664
https://juejin.im/post/6844903608534695943
https://juejin.im/post/6844903892560379917
https://juejin.im/post/6844904005236162568
https://segmentfault.com/a/1190000016662929