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

Question

我有问题，如何使用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>