Javascript 网络组件,Vaadin路由器中的发送对象
我有一个问题,如何使用Vaadin路由器发送路由内的对象Javascript 网络组件,Vaadin路由器中的发送对象,javascript,html,vaadin,web-component,Javascript,Html,Vaadin,Web Component,我有一个问题,如何使用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 = t
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>
${this.requestUsers.map(项=>html`
${item.correo}
${item.telefono}
${item.perfil}
${item.fecha_venciiento}
${item.fecha_venciiento}
`)}
链接必须捕获名称并将其发送到form-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>
受影响的代码部分如下:
<div>
<label for="nombre_completo">nombre completo</label>
<input type="text" id="nombre_completo" value="${ location.Params.nombre }">
</div>
名词复数