The current route

Your code often needs to know which route the visitor is on: its parameters, its query string, or the record a dynamic route loaded. The SDK's app service keeps all of this at $sdk.app.route, and keeps it up to date as the visitor navigates.

Route properties

• title: the route's title, as named in the builder.
• name: the route's ID, the programmatic name you link to.
• path: the path the visitor is viewing, for example /blog/article:spring-workshop.
• params: the values of the route's parameters, taken from the URL. For a route with the path /blog/:slug, a visitor on /blog/article:spring-workshop gives params.slug = "article:spring-workshop".
• query: the query-string values. A visitor on /blog?hello=world&foo=bar gives { hello: "world", foo: "bar" }.
• items: one entry per route parameter. If the value was a record ID or an absolute slug (such as article:spring-workshop), Qik loads that record and puts it here, so items.slug is the full record. For any other value, the entry is just the text from the URL. See Dynamic Route Parameters.
• errors: if a record couldn't be loaded (for example the application doesn't have permission to see it), the error appears here under the parameter's name.
• loading / loaded: whether the route is still loading its records, or has finished.

Reading the route in a template

In any HTML template (Custom Code, your own blocks or components) you can use the route directly:

<h1 v-if="$sdk.app.route.items.slug">{{ $sdk.app.route.items.slug.title }}</h1>

Reading the route in JavaScript

In component JavaScript, read it through a computed property so it updates automatically when the route changes:

{
    computed: {
        currentRoute() {
            return this.$sdk.app.route;
        },
        article() {
            return this.$sdk.app.route.items?.slug;
        },
    },
}

Reacting to route changes

To do something whenever the visitor moves to another route, such as closing a mobile menu or sending an analytics event, listen for the SDK's route:change event. Don't watch $route: Qik handles navigation itself, so a $route watcher may never fire.

{
    mounted() {
        this.$sdk.addEventListener('route:change', this.onRouteChange);
    },
    beforeUnmount() {
        this.$sdk.removeEventListener('route:change', this.onRouteChange);
    },
    methods: {
        onRouteChange(route) {
            this.menuOpen = false;
        },
    },
}

Always remove the listener in beforeUnmount(), so it doesn't pile up each time the block is shown again.

For linking to routes and navigating from code, see Navigating and Linking to Routes.

Examples

// The visitor is on /docs/article:getting-access-to-the-current-route?foo=bar&hello=world
{
  "title": "Documentation Page",
  "name": "page",
  "path": "/docs/article:getting-access-to-the-current-route",
  "params": {
    "slug": "article:getting-access-to-the-current-route"
  },
  "query": {
    "foo": "bar",
    "hello": "world"
  },
  "items": {
    "slug": {
      "_id": "64dab19b6110b10e0bf0ff18",
      "title": "The current route",
      "body": "...",
      "data": {},
      "meta": {
        "abs": "article:getting-access-to-the-current-route"
      }
    }
  },
  "errors": {},
  "loading": false,
  "loaded": true
}

<div>
    <pre>{{ currentRoute }}</pre>
</div>

{
    computed: {
        currentRoute() {
            return this.$sdk.app.route;
        }
    }
}

<nav :class="{ open: menuOpen }">
    <button @click="menuOpen = !menuOpen">Menu</button>
</nav>

{
    data() {
        return { menuOpen: false };
    },
    mounted() {
        this.$sdk.addEventListener('route:change', this.onRouteChange);
    },
    beforeUnmount() {
        this.$sdk.removeEventListener('route:change', this.onRouteChange);
    },
    methods: {
        onRouteChange(route) {
            // Close the mobile menu after navigating
            this.menuOpen = false;
        }
    }
}

Example Use Cases

FAQs