Navigating and linking to routes

Using the Link element

As the Vue UI Kit is included within the UI builder, it's highly recommended that you create links to the various routes through use of the <ux-link/> element. Not only does it save you time and effort, but it also ensures that your links won't break if you change the URL of the route you are linking to.

More information on how to use the <ux-link/> element can be found here:
https://ui.docs.qik.dev/#component-link

Using the SDK

Sometimes you may want to programmatically navigate the user to a specific route. This can be done through use the SDK and the app service. To navigate the user use the $sdk.app.to() method similar to the examples shown here:

Simple Example

$sdk.app.to({name:'home'})

This URL would look similar to: `/`

Specifying Route Parameters

$sdk.app.to({name:'about', params:{variable:'one'}})

If a route existed with a path like this: `/about-us/:variable` This URL would look similar to: `/about-us/one`

Specifying Query String Parameters

$sdk.app.to({name:'contact', query:{hello:'world'}})

This URL would look similar to: `/contact-us?hello=world`

Using a Menu

A typical interface would have a number of menus, often a `Primary Menu` and maybe some menus in the footer. Menus can be created within the interface builder with lists of links to your various routes. These menus can then be rendered inside your blocks to make quick and painless links that users can use to navigate.

Examples