How to use @vaadin/router - 10 common examples

To help you get started, we’ve selected a few @vaadin/router examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github web-padawan / polymer3-webpack-starter / src / routes / router.js View on Github external
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: () => {
github justinribeiro / blog-pwa / app / src / blog-pwa.js View on Github external
_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');
            },
          },
          {
github elmsln / lrnwebcomponents / elements / haxcms-elements / lib / core / themes / haxcms-legacy-player.js View on Github external
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
github jouni / j-elements / site / src / j-site.js View on Github external
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;
github elmsln / lrnwebcomponents / elements / haxcms-elements / lib / core / haxcms-site-router.js View on Github external
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)
    );
  }
github vaadin / flow / flow-tests / test-ccdm / frontend / client-router.js View on Github external
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);
}
github vaadin / generator-polymer-init-vaadin-elements-app / app / templates / src / routes / app-routing.js View on Github external
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: () => {
github thepassle / reddit-pwa / src / reddit-pwa-app.js View on Github external
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');}
github elmsln / WCFactory / packages / ui / components / wcfactory-ui.js View on Github external
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'},
    ]);
  }
}
github open-wc / lit-demos / index.js View on Github external
switchRoute(route) {
    this.activeTab = route;
    Router.go(`/${route}`); 
  }

@vaadin/router

Small and powerful client-side router for Web Components. Framework-agnostic.

Apache-2.0
Latest version published 1 year ago

Package Health Score

60 / 100
Full package analysis

Popular @vaadin/router functions