Wu framework: Router documentation

Router allows you to watch changes in the browser URL and save the normalized route in the data model. The data stored in the model are the URL params and if the route is active. The router updates the data model indicated by the path update with:

{
  isActive: true, // or false
  params: {} // url pattern params
}

Also, in order for you to be able to get the URL data and watch the changes, when the browser URL changes, the path of the data model app.route.location is updated with the following information:

// when browser URL is https://localhost:3000/path?one=1#two 'app.route' is:
{
  hash: 'two',
  host: 'localhost:3000',
  hostname: 'localhost',
  pathName: '/path',
  port: '3000',
  protocol: 'https:',
  queryParams: {
    one: '1'
  },
  url: 'https://localhost:3000/path?one=1#two'
}

Also app.route.notFound = true if none of the router created in Wu match the current URL.

Important:

All created routers are ensured when wu.start() is executed.

Data flow:

Browser URL ➤ Reactive data model.

Router definition properties:

| Properties | Required | |:——————————————————–:|:——–:| | urlPattern | Required | | update | Required |

Examples

wu.create('router', 'userLoginRoute', { // name of the router item
  urlPattern: '/user/login',
  update: 'user.login.route'
})

// when browser URL is '/user/login' 'user.login.route' is { isActive: true, params: {} }
// when browser URL is not '/user/login' 'user.login.route' is { isActive: false, params: {} }

wu.create('router', 'userLoginRoute', { // name of the router item
  urlPattern: '/user/:userId/detail',
  update: 'user.detail.route'
})

// when browser URL is '/user/asdf1234/detail' 'user.detail.route' is { isActive: true, params: { userId: 'asdf1234' } }
// when browser URL is not '/user/asdf1234/detail' 'user.detail.route' is { isActive: false, params: {} }