Vaadin Router访问应用根路径时如何自动跳转至指定子组件

算力阿峰

2026-10-4

你可以将路由跳转逻辑放在伞形主组件x-layout的首次挂载生命周期钩子中，同时增加路径判断规则，仅当访问根路径时触发跳转，完全符合你的所有限制条件。

实现步骤

在x-layout组件的首次加载钩子中执行跳转逻辑，避免影响子路由的独立访问能力
增加执行状态标记，防止组件重复挂载时多次触发跳转

代码示例

基于Lit开发的Web组件

import { LitElement, html } from 'lit';
import { Router } from '@vaadin/router';

class XLayout extends LitElement {
  render() {
    return html`
      <vaadin-app-layout>
        <slot></slot>
      </vaadin-app-layout>
    `;
  }

  // 组件首次渲染完成后触发
  firstUpdated() {
    // 仅当当前路由为根路径时跳转，避免干扰/rooms等子路径的直接访问
    if (Router.location.pathname === '/') {
      Router.go('/users');
    }
  }
}
customElements.define('x-layout', XLayout);

原生自定义组件

import { Router } from '@vaadin/router';

class XLayout extends HTMLElement {
  // 私有属性标记跳转状态，避免重复执行
  #hasRedirected = false;

  connectedCallback() {
    this.innerHTML = `
      <vaadin-app-layout>
        <slot></slot>
      </vaadin-app-layout>
    `;
    
    if (Router.location.pathname === '/' && !this.#hasRedirected) {
      this.#hasRedirected = true;
      Router.go('/users');
    }
  }
}
customElements.define('x-layout', XLayout);