How to use @vaadin/router - 10 common examples

export function init(outlet) {
  const router = new Router(outlet);
  router.setRoutes([
    {
      path: '/',
      redirect: EMPLOYEE_LIST
    },
    {
      path: EMPLOYEE_LIST,
      component: 'employee-list',
      action: () => {
        import(/* webpackChunkName: "list" */ '../views/employee-list');
      }
    },
    {
      path: NEW_EMPLOYEE,
      component: 'employee-new',
      action: () => {

_initRouter() {
    const outlet = this.shadowRoot.querySelector('main');
    const router = new Router(outlet, null);

    // Don't be fooled; we don't set the routes async/await with the inner call
    // because we don't want vaadin-router to wait; let it inject fast so we can
    // stamp and load data
    router.setRoutes([
      {
        path: '/',
        children: [
          {
            path: '',
            component: 'blog-static',
            action: () => {
              this.__loadRoute('static');
            },
          },
          {

constructor() {
    super();
    // create router
    let options = {};
    if (this.baseURI) {
      options.baseUrl = this.baseURI;
    }
    this.router = new Router(this, options);
    window.addEventListener(
      "vaadin-router-location-changed",
      this._routerLocationChanged.bind(this)
    );
  }
  // simple path from a url modifier

connectedCallback() {
    const tabs = this.querySelector('vaadin-tabs[slot=drawer]');
    // Let router choose which tab to select
    tabs.selected = -1;

    this._router = new Router(this.querySelector('j-app-layout .content'));
    this._router.setRoutes({
      path: '(.*)', component: 'index-page'
    });

    window.addEventListener('vaadin-router-location-changed', e => {
      // Update the selected tab
      Array.from(tabs.querySelectorAll('vaadin-tab')).find((tab, i) => {
        if (tab.querySelector('a').getAttribute('href') == e.detail.location.pathname) {
          this._updateTitle(tab.textContent);
          if (this._blockLocationChangeListener) {
            this._blockLocationChangeListener = false;
            // Finish Array.find
            return true;
          }

          this._blockTabChangeListener = true;

constructor() {
    super();
    // create router
    let options = {};
    if (this.baseURI) {
      options.baseUrl = this.baseURI;
    }
    this.router = new Router(this, options);
    /**
     * Subscribe to changes in the manifest
     */
    this.__disposer = autorun(() => {
      this._updateRouter(store.routerManifest);
    });
    window.addEventListener(
      "vaadin-router-location-changed",
      this._routerLocationChanged.bind(this)
    );
  }

const navigationContainer = document.createElement('div');
  navigationContainer.appendChild(createNavigationLink('Empty view', ''));
  navigationContainer.appendChild(createNavigationLink('Client view', 'client-view'));
  navigationContainer.appendChild(createNavigationLink('Server view', 'serverview'));
  navigationContainer.appendChild(createNavigationLink('View with all events', 'view-with-all-events'));
  navigationContainer.appendChild(createNavigationLink('Prevent leaving view', 'prevent-leaving'));
  navigationContainer.appendChild(createNavigationLink('View with home button', 'serverview/view-with-home-button'));
  routerContainer.appendChild(navigationContainer);

  const outlet = document.createElement('div');
  outlet.id = 'outlet';
  routerContainer.appendChild(outlet);

  document.body.appendChild(routerContainer);

  const router = new Router(outlet);

  router.setRoutes(routes, true);
}

export function init(outlet) {
  const router = new Router(outlet);
  router.setRoutes([
    {
      path: '/',
      redirect: EMPLOYEE_LIST
    },
    {
      path: EMPLOYEE_LIST,
      component: 'employee-list',
      action: () => {
        import('../views/employee-list.js');
      }
    },
    {
      path: NEW_EMPLOYEE,
      component: 'employee-new',
      action: () => {

firstUpdated() {
    const router = new Router(this.shadowRoot.getElementById('outlet'));

    router.setRoutes([
      {
        path: '/',
        component: 'reddit-pwa-search',
        action: () => { import('./reddit-pwa-search.js');}
      },
      {
        path: '/:subreddit',
        component: 'reddit-pwa-subreddit',
        action: () => { import('./reddit-pwa-subreddit.js');}
      },
      {
        path: '/:subreddit/:id/:title',
        component: 'reddit-pwa-thread',
        action: () => { import('./reddit-pwa-thread.js');}

routerSetup() {
    const outlet = this.shadowRoot.getElementById('router-outlet')
    const router = new Router(outlet);
    router.setRoutes([
      {path: '/', component: 'wcfactory-ui-factories'},
      {path: '/factories', component: 'wcfactory-ui-factory'},
      {path: '/factories/create', component: 'wcfactory-ui-factory-create'},
      {path: '/factories/:factory', component: 'wcfactory-ui-factory'},
      {path: '/factories/:factory/create-element', component: 'wcfactory-ui-element-create'},
      {path: '(.*)', component: 'wcfactory-ui-404'},
    ]);
  }
}

switchRoute(route) {
    this.activeTab = route;
    Router.go(`/${route}`); 
  }