Router Hooks
The Blits router supports hooks that allow you to execute code at specific points during the navigation process.
Hooks are defined per route in the optional hooks
key within the Route configuration object.
Currently, the Blits router only supports the before hook, with additional hooks planned for future releases.
Before hook
The before hook is executed before the navigation occurs. It can be used for checks, such as verifying user authentication for a specific route, for pre-fetching data, or for executing logic like sending stats beacons.
The before hook is defined as a function that receives 2 arguments: the Route object that is being navigated to
. And the Route object that is being navigated away from
.
export default Blits.Application({
// ...
routes: [
{
path: '/',
component: Home,
hooks: {
before(to, from) {
// custom logic
}
}
}
],
// ...
})
The before hook can optionally return a value, which will influence the behaviour of the route change:
- when
false
is returned, the router will fail to finish the routing, and act as if no matching route was found - when a
string
is returned, the router will interpret this as a new route path to redirect to - when an
object
is returned, the router will interpret this as a route object, allowing to modify (or completely replace) the route object being navigated to
Returning an object
is a simple, yet powerful, mechanism to add advanced runtime configuration to your routes. A common scenario is to overwrite certain parts of the route object provided in the to
-argument, such as the route options (such as inHistory
or stayAlive
) or define conditional page transitions.
It's also possible to add custom data to the route object in the key
object. Custom data should be an object literal. When the new page loads, the keys in the data
object are injected into the Component as props
.
export default Blits.Application({
// ...
routes: [
{
path: '/video/details/:id',
component: Details,
hooks: {
before(to, from) {
// redirect to an error page when id is not a number
if(isNaN(to.params.id)) {
return '/not-valid'
}
// set a different transition when navigating from home page
if(from && from.path === '/home') {
to.transition = slideInTransition
}
// add custom data
to.data.title = 'Hello World'
// finally return the modified route object
return to
}
}
}
],
// ...
})
Global router hooks
Besides router hooks per route, as In the previous section, it is also possible to define global hooks that are applicable to all routes / the router as a whole.
In order to configure global router hooks the routes
key in the Application configuration object should be wrapped inside a router
key.
Alongside the router.routes
key we can now define a router.hooks
object, which can have any of the following pre-defined hook functions:
beforeEach()
Similar to the before
-hook, the beforeEach
-hook will be execute for every router navigation. This can be useful if you find yourself repeating the same functionality for many routes, for example an authentication check or sending telemetry.
The beforeEach
-hooks functions the same as the before
-hook. It receives the route being navigated to as its first argument and the route navigated from as the second. And it can also optionally return a value, which will influence the behaviour of the route change as explained in the previous section.
init()
The init
-hook is a router hook that will be invoked once when defined when the router is being instantiated. It can be used to do some onetime setup, required before starting the routing.
The init
-hook can be an asynchronous function. In this case the router will await the init function to resolve before comencing the first navigation.
error()
The error
-hook is a router hook that will be invoked when an error has occured. For example when routing to a non-existing route. It will receive an error message and the developer is free to implement any error handling functionality in this hook. This can be showing an Error popup, or navigating to a predefined 404 Not found route using the this.$router.to()
method.
export default Blits.Application({
// ...
router: {
// array with routes wrapped in router key
routes: [
{
path: '/video/details/:id',
component: Details,
}
],
hooks: {
async init() {
this.someConfig = await retrieveSomeConfig()
},
beforeEach(to, from) {
if(protectedRoutes.indexOf(to.path) > -1 && this.loggedIn === false) {
return 'loginPage'
}
},
error(msg) {
this.showErrorModal(msg)
}
}
}
// ...
})