configuraci\u00f3n de las rutas es necesario definir un patr\u00f3n<\/strong>. En este articulo explicar\u00e9 los diferentes patrones que podremos utilizar.<\/p>\nCuando el hash se a\u00f1ade a la url, el Router realizar\u00e1 la comparaci\u00f3n con los patrones configurados y navegar\u00e1 a la primera coincidencia. Por ese motivo,\u00a0es conveniente que los patrones sean diferentes entre s\u00ed<\/strong>, para un correcto funcionamiento de la navegaci\u00f3n en nuestras aplicaciones.<\/p>\nA continuaci\u00f3n, veremos los dos tipos de patrones que podremos definir:<\/p>\n
\n- Patr\u00f3n Hard-code<\/li>\n<\/ul>\n
El hash deber\u00e1 coincidir exactamente con el patr\u00f3n. Por ejemplo, si el definimos el siguiente patr\u00f3n, \u201cproducto\/configuraci\u00f3n<\/em><\/strong>\u201d<\/em>. \u00danicamente, coincidir\u00e1n si el hash es exactamente igual al patr\u00f3n. Con este tipo de patr\u00f3n, no es posible pasar datos entre vistas.<\/p>\n\n- Patr\u00f3n con par\u00e1metros<\/li>\n<\/ul>\n
Si queremos pasar datos entre vista, deberemos utilizar los patrones con par\u00e1metros. Podremos utilizar cuatro tipos de par\u00e1metros a la hora de definir los patrones.<\/p>\n
1. Par\u00e1metros obligatorios<\/h2>\n
Puede definir par\u00e1metros obligatorios para el patr\u00f3n colocando el par\u00e1metro entre llaves\u00a0\u201c{ID del par\u00e1metro}<\/strong>\u201d.<\/strong><\/p>\nPor ejemplo, si definimos un patr\u00f3n \u201cproducto\/{id}<\/em><\/strong>\u201d<\/em>, los hash-es \u201cproducto\/5<\/em><\/strong>\u201d<\/em>\u00a0y \u201cproducto\/3<\/em><\/strong>\u201d<\/em>, coincidir\u00e1n con el patr\u00f3n. En cambio, el hash \u201cproducto\/<\/em><\/strong>\u201d\u00a0<\/em>no coincidir\u00e1 con el patr\u00f3n porque falta el par\u00e1metro obligatorio.<\/p>\n![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2019\/07\/SAP-UI5-Navegacion-y-Enrutamiento-patrones-2.png\")
<\/p>\n
2. Par\u00e1metros opcionales<\/h2>\n
Puede definir par\u00e1metros opcionales para el patr\u00f3n colocando el par\u00e1metro entre dos puntos \u201c:ID del par\u00e1metro:<\/strong>\u201d.<\/p>\nPor ejemplo, si definimos un patr\u00f3n \u201c\/producto\/{id}\/detalle\/:idDetalle:<\/em><\/strong>\u201d<\/em>, \u201cidDetalle\u201d<\/em>\u00a0ser\u00e1 el par\u00e1metro opcional y \u201cid\u201d<\/em>\u00a0ser\u00e1 el par\u00e1metro obligatorio. Si comparamos los hash-es \u201cproducto\/5\/detalle<\/em><\/strong>\u201d<\/em>\u00a0y \u201cproducto\/3\/detalle\/2<\/em><\/strong>\u201d<\/em>, ambos hash-es coincidir\u00e1n con el patr\u00f3n.<\/p>\n![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2019\/07\/SAP-UI5-Navegacion-y-Enrutamiento-patrones-3.png\")
<\/p>\n
3. Par\u00e1metros de consulta<\/h2>\n
El par\u00e1metro de consulta permite pasar consultas con cualquier par\u00e1metro dentro de \u00e9l. Un par\u00e1metro de consulta comienza con\u00a0?<\/strong>, y puede ser definido como obligatorio \u201cproducto{?query}<\/em><\/strong>\u201d u opcional \u201cproducto:?query:<\/em><\/strong>\u201d.<\/p>\nPodremos utilizar este tipo de par\u00e1metro para enviar un n\u00famero de grande de par\u00e1metros, por ejemplo, \u201cproducto?id=5&detalle=7&fecha=20181221<\/em><\/strong>\u201d.\u00a0<\/em>En la vista destino, en manejador del evento de navegaci\u00f3n el par\u00e1metro de consulta se convertir\u00e1 en un objeto, con el resto de par\u00e1metros como atributos.<\/p>\n![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2019\/07\/SAP-UI5-Navegacion-y-Enrutamiento-patrones-4.png\")
<\/p>\n
4. Par\u00e1metro \u201crest as string\u201d<\/h2>\n
Un par\u00e1metro que finaliza con un asterisco\u00a0*<\/strong>\u00a0se denomina par\u00e1metro \u00abrest as string\u00bb. Es posible definir el par\u00e1metro como obligatorio \u201c{detalle*}<\/strong>\u201d u opcional \u201c:detalle*:<\/strong>\u201d.<\/p>\nPor ejemplo, si definimos un patr\u00f3n \u201cproducto\/{id}\/:detalle*:<\/em><\/strong>\u201d<\/em>, el par\u00e1metro \u201cid<\/em>\u201d ser\u00e1 obligatorio y el par\u00e1metro \u201cdetalle<\/em>\u201d ser\u00e1 opcional del tipo \u201crest as string\u201d. \u00a0Si comparamos los siguientes hash-es \u201cproducto\/5\/3<\/em><\/strong>\u201d<\/em>\u00a0y \u201cproducto\/5\/detalle\/3\/foo<\/em><\/strong>\u201d<\/em>, ambos coincidir\u00e1n con el patr\u00f3n. Al obtener el valor del par\u00e1metro detalle, en el primer caso recibiremos el valor \u201c3<\/em>\u201d y el segundo \u201cdetalle\/3\/foo<\/em>\u201d.<\/p>\n![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2019\/07\/SAP-UI5-Navegacion-y-Enrutamiento-patrones-1.png\")
<\/p>\n
Gracias a los diferentes tipos, podemos crear el patr\u00f3n que mejor se adecue a nuestras necesidades, de una manera sencilla y clara.<\/p>\n
Esperamos que este art\u00edculo te haya resultado de inter\u00e9s para realizar la configuraci\u00f3n de las rutas con patrones.<\/strong>\u00a0 Puedes dejarnos tu pregunta en comentarios o ponerte en contacto con nuestro departamento de User Experience e Integraci\u00f3n.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”M\u00e1s informaci\u00f3n” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n
M\u00e1s informaci\u00f3n:<\/p>\n
[\/et_pb_text][et_pb_button button_url=”https:\/\/orekait.com\/es\/area-personalizacion” button_text=”M\u00e1s informaci\u00f3n” module_class=”entrada-btn” _builder_version=”4.25.2″ _module_preset=”default” custom_button=”on” button_text_color=”#8156EA” button_bg_color=”RGBA(255,255,255,0)” button_border_color=”#8156EA” button_border_radius=”30px” button_font=”Plus Jakarta Sans|600|||||||” button_icon=”$||divi||400″ button_icon_color=”#8156EA” button_on_hover=”off” hover_enabled=”0″ global_colors_info=”{}” button_text_color__hover_enabled=”on|desktop” button_text_color__hover=”#8156EA” button_bg_color__hover_enabled=”on|hover” button_bg_color__hover=”#8156EA” button_bg_enable_color__hover=”on” button_icon_color__hover_enabled=”on|hover” button_icon_color__hover=”#ffffff” url_new_window=”on” sticky_enabled=”0″][\/et_pb_button][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” custom_margin=”||40px||false|false” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=”on” admin_label=”Noticias relacionadas titulo” module_id=”fondo-articulos” _builder_version=”4.25.2″ _module_preset=”default” background_color=”#f7f7f7″ width=”100%” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” custom_margin=”||40px||false|false” global_colors_info=”{}”][\/et_pb_divider][et_pb_heading title=”Quizas te pueda interesar” _builder_version=”4.25.2″ _module_preset=”default” title_level=”h2″ title_text_align=”center” global_colors_info=”{}”][\/et_pb_heading][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” custom_margin=”||30px||false|false” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Noticias relacionadas” _builder_version=”4.25.2″ _module_preset=”default” width=”100%” custom_margin=”-150px||||false|false” custom_margin_tablet=”0px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|desktop” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_blog fullwidth=”off” posts_number=”3″ include_categories=”current” show_author=”off” show_date=”off” show_pagination=”off” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_blog][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
Como visteis en art\u00edculo anterior de\u00a0navegaci\u00f3n y enrutamiento en SAPUI5, cuando se realiza la\u00a0configuraci\u00f3n de las rutas es necesario definir un patr\u00f3n. En este articulo explicar\u00e9 los diferentes patrones que podremos utilizar. Cuando el hash se a\u00f1ade a la url, el Router realizar\u00e1 la comparaci\u00f3n con los patrones configurados y navegar\u00e1 a la primera coincidencia. […]<\/p>\n","protected":false},"author":3,"featured_media":12036,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"Lorem ipsum dolor sit amet consectetur adipiscing elit congue montes, imperdiet taciti erat elementum fermentum sem ante ultrices ridiculus, sagittis sociis egestas quisque ac semper quis odio. Aenean hendrerit ac metus dis nascetur aliquet mollis integer, rutrum vel laoreet posuere proin sagittis luctus est, tempus duis nisl ultrices parturient tempor praesent. Dignissim curabitur nascetur pellentesque augue fringilla pulvinar eros, tempus fames vehicula maecenas cubilia id, rutrum euismod integer ut scelerisque mus.\r\n\r\nVivamus auctor odio aenean rhoncus natoque dictum purus, volutpat pellentesque laoreet ridiculus consequat nisi varius euismod, augue platea convallis curae magnis taciti. Imperdiet nibh curabitur quisque orci consequat aenean pellentesque, cubilia duis senectus felis sed posuere tortor, magnis enim diam a odio sociis. Enim tellus nisl nec molestie augue luctus tempor habitant, nunc dictumst phasellus volutpat sem facilisis taciti, habitasse laoreet at turpis vel fermentum vulputate.","_et_gb_content_width":"","footnotes":""},"categories":[52,51],"tags":[],"class_list":["post-12034","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sapui5","category-user-experience-integracion"],"_links":{"self":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/12034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/comments?post=12034"}],"version-history":[{"count":5,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/12034\/revisions"}],"predecessor-version":[{"id":22179,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/12034\/revisions\/22179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media\/12036"}],"wp:attachment":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media?parent=12034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/categories?post=12034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/tags?post=12034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}