Context

The context object contains information about the current route as well as any data attached by middleware (if applicable)

API

ctx.router

Router that the current page belongs to

ctx.route

Current route

ctx.element

DOM element for the router-view container for this route

undefined before render and in redirections

ctx.base

Parent pathname and app base, if applicable

ctx.path

The current path, excluding parent path, including child path

ctx.pathname

The current path, excluding parent path and child path

ctx.canonicalPath

The current path, including parent, excluding app base, excluding child path

ctx.params

Object containing route parameters

ctx.search

Identical to location.search, but allows use in beforeNavigate middleware

ctx.hash

Identical to location.hash, but allows use in beforeNavigate middleware

ctx.$root

Root context accessor

ctx.$parent

Parent context accessor

ctx.$parents

Array of parent contexts

ctx.$child

Child context accessor

ctx.$children

Array of child contexts

ctx.addBeforeNavigateCallback(() => MaybePromise<boolean | null>)

Adds a function to be executed before the page is navigated away from, and potentially block navigation. This may be used to show a save confirmation, for example.

Async is supported via promises.

To prevent navigation, the beforeNavigate callback may a) return false b) return a Promise that resolves false c) return a rejected Promise

Callbacks are executed LIFO; async functions will be ran in series. If a callback prevents navigation by one of the above methods, no more callbacks will be executed.

e.x.

import ko from 'knockout'
import swal from 'sweetalert2'

class ViewModel {
  constructor(ctx) {
    this.savePending = ko.observable(false)
    ctx.addBeforeNavigateCallback(this.promptToSave.bind(this))
  }

  // async functions are just functions that return promises behind the scenes
  async promptToSave() {
    if (!this.savePending()) {
      return false
    }

    try {
      await swal({
        title: 'Save Pending!',
        text: 'Are you sure you want to leave this page?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Discard Changes',
      })
    } catch (e) {
      return false
    }
  }
}

ctx.queue(promise)

Queues a promise and allows middleware to continue running, but still resolves before the page is rendered. Allows for many async operations that do not depend on each other to run concurrently. For an example, see the lazy-loading example and open the network tab. Each child loads its component via ajax, however all of these requests are made at the same time and do not prevent other middleware from executing.

ctx.redirect(path)

Only to be used in plain middleware, or the beforeRender phase of a lifecycle/generator middleware, this function short circuits the middleware execution, prevents an intermediate render and runs and downstream lifecycle middleware to clean up, then navigates to a new route.

path is resolved via utils.traversePath

---

Back