3.7. Router 实例方法

router.beforeEach、router.beforeResolve、router.afterEach

  • 函数签名:
    router.beforeEach((to, from, next) => {
      /* 必须调用 `next` */
    })
    router.beforeResolve((to, from, next) => {
      /* 必须调用 `next` */
    })
    router.afterEach((to, from) => {})
    
  • 增加全局的导航守卫。参考 2.1. 导航守卫
  • 在 2.5.0+ 这三个方法都返回一个移除已注册的守卫/钩子的函数。

router.push、router.replace、router.go、router.back、router.forward

  • 函数签名:
    router.push(location, onComplete?, onAbort?)
    router.push(location).then(onComplete).catch(onAbort)
    router.replace(location, onComplete?, onAbort?)
    router.replace(location).then(onComplete).catch(onAbort)
    router.go(n)
    router.back()
    router.forward()
    
  • 动态的导航到一个新 URL。参考 1.5. 编程式的导航
  • 这些函数仅在安装路由插件并将其传递给 Vue 根实例后调用,如 1.2. 起步 所示。

router.getMatchedComponents

  • 函数签名:
    const matchedComponents: Array<Component> = router.getMatchedComponents(location?)
    
  • 返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类,不是实例)。通常在服务端渲染的数据预加载时使用。

router.resolve

  • 函数签名:
    const resolved: {
      location: Location;
      route: Route;
      href: string;
    } = router.resolve(location, current?, append?)
    
  • 解析目标位置 (格式和 <router-link>to prop 一样)。
    • current 是当前默认的路由 (通常你不需要改变它)
    • append 允许你在 current 路由上附加路径 (如同 router-link)

router.addRoutes

  • 已废弃 :使用 router.addRoute() 代替。
  • 函数签名:
    router.addRoutes(routes: Array<RouteConfig>)
    
  • 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

router.addRoute

  • 添加一条新路由规则。如果该路由规则有 name,并且已经存在一个与之相同的名字,则会覆盖它。
  • 函数签名:
    addRoute(route: RouteConfig): () => void
    

router.addRoute

  • 添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name,并且已经存在一个与之相同的名字,则会覆盖它。
  • 函数签名:
    addRoute(parentName: string, route: RouteConfig): () => void
    

router.getRoutes

  • 获取所有活跃的路由记录列表。注意只有文档中记录下来的 property 才被视为公共 API ,避免使用任何其它 property,例如 regex,因为它在 Vue Router 4 中不存在。
  • 函数签名:
    getRoutes(): RouteRecord[]
    

router.onReady

  • 函数签名:
    router.onReady(callback, [errorCallback])
    
  • 该方法把一个回调排队,在路由完成初始导航时调用,这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。
  • 这可以有效确保服务端渲染时服务端和客户端输出的一致。
  • 第二个参数 errorCallback 只在 2.4+ 支持。它会在初始化路由解析运行出错 (比如解析一个异步组件失败) 时被调用。

router.onError

  • 函数签名:
    router.onError(callback)
    
  • 注册一个回调,该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种:
    • 错误在一个路由守卫函数中被同步抛出;
    • 错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理;
    • 渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。