URL format

Since I will use a lot of URLs in the following examples, let's quickly look at the URL formats:

• /inbox/33(popup:compose)
• /inbox/33;open=true/messages/44

As you can see, the router uses parentheses to serialize secondary segments (for example, popup:compose), the colon syntax to specify the outlet, and the ;parameter=value syntax (for example, open=true) to specify route specific parameters.

In the following examples we assume that we have given the following configuration to the router, and we are navigating to /inbox/33/messages/44:

[
  { path: '', pathMatch: 'full', redirectTo: '/inbox' },
  {
    path: ':folder',
    children: [
      {
        path: '',
        component: ConversationsCmp
      },
      {
        path: ':id',
        component: ConversationCmp,
        children: [
          { path: 'messages', component: MessagesCmp },
          { path: 'messages/:id', component: MessageCmp }
        ]
      }
    ]
  },
  {
    path: 'compose',
    component: ComposeCmp,
    outlet: 'popup'
  },
  {
    path: 'message/:id',
    component: PopupMessageCmp,
    outlet: 'popup'
  }
]