Navegacion

En el post de hoy te mostraré cómo prevenir que el usuario navegue a otra página o pestaña, recargue la página o la cierre. Todo esto con JavaScript. Desde ahora te digo que (si bien contradice el título del post) no es posible prevenirlo al 100 %, solo se puede mostrar una advertencia que el usuario puede ignorar. Si bien no vamos a prevenir, te mostraré cómo mostrar un mensaje para darle al usuario la posibilidad de no cerrar la pestaña o navegar a otro lugar. Esto funciona con Chrome y Firefox en sus últimas versiones al momento de escribir este post. ...

En este corto post sobre Vue y el enrutador del mismo te mostraré cómo ir de un componente a otro de manera programada, es decir, desde el código. De este modo podrás navegar de manera programada con el Vue Router al hacer clic en algún botón o en cualquier acción, pues lo harás por medio del código de JavaScript o TypeScript. ...

En este post te mostraré cómo navegar a otra ruta en una SPA de Angular usando TypeScript. Es decir, navegar en el click de un botón o en determinada acción, y no a través de un enlace. Lo único que tenemos que hacer es importar al router, inyectarlo en el constructor y después invocar a navigateByUrl (igualmente el router tiene más métodos). ...

Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha. Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos: Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación Mat Sidenav Container: el contenedor de lo que veremos a continuación Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material. Si quieres ver el ejemplo terminado haz click aquí. ...