WebComponents,在Vaadin路由器中发送对象

问题描述

我有问题,如何使用Vaadin路由器在路由内发送对象?

routing.js

import {Router} from '@vaadin/router';
import './components/app-component';
import './components/users-component';
import './components/form-component';

export const routing = function() {
   const outlet = this.shadowRoot.getElementById('outlet');
   const router = new Router(outlet);

   var routes = [
       {path: '/',component: 'users-component'},{path: '/form/:name',component: 'form-component'}
   ]

   router.setRoutes(routes);
}

一个文件是我的用户列表:users-component.js

<tbody>
  ${this.requestUsers.map(item => html`
     <tr>
       <td>
         <a href="/form/${item.nombre}">${item.nombre}</a>
        </td>
        <td>${item.correo}</td>
        <td>${item.telefono}</td>
        <td>${item.perfil}</td>
        <td><input type="checkBox" ?checked=${item.en_plantilla}></td>
        <td>${item.fecha_vencimiento}</td>
        <td>${item.fecha_vencimiento}</td>
        <td class="celda_semaforo">
           <img src="src/assets/images/${item.semaforo ? 'semaforo_verde.png' : 'semaforo_rojo.png'}" width="40">
        </td>
     </tr>
      `)}
   </tbody>

链接必须捕获名称并将其发送到form-component.js

受影响的代码部分是这样的:

<div>
  <label for="nombre_completo">nombre completo</label>
  <input type="text" id="nombre_completo" value="${ location.Params.nombre }">
</div>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)