Vaadin路由器嵌套路由

问题描述

我的应用程序是使用LitElement用JS编写的。我想在我的应用程序中包含以下路线：

/auth/login
/auth/register

在我的app.js中，我这样配置路由器：

router.setRoutes([
        {
            path: '/auth',component: 'yp-auth-page',action: async () => await import('./modules/auth/yp-auth-page'),},]);

现在在yp-auth-page中，我想做这样的事情：

router.setRoutes([
        {
            path: '/login',component: 'yp-login-page',]); 

但是，一旦我在子组件（yp-auth-page.js）中调用router.setRoutes，App.js就会出现错误：

未捕获（承诺）错误：[Vaadin.Router]找不到页面（/ auth）

我才刚刚开始学习Vaadin路由器，并且找不到有关此错误的任何帖子，并且嵌套路由教程正在使用TS装饰器，因此我找不到嵌套这种路由的方法。

解决方法

您可以像这样将它们添加到childern下方

import './modules/auth/yp-auth-page'
    router.setRoutes([
        {
            path: '/auth',component: 'yp-auth-page',children:[
                {
                   path: '/login',component: 'yp-login-page',action: () =>import('you login component')
               }
            ]
        },]);

当您要使用它时，只需从@ vaadin / router导入Router 并使用Router.go('/auth/login')

导航