Router SPA
Caso Practico con
Vue Router
Madrid 9 Feb 2019
Eduardo
San Martin Morote
🌍 Vue core team
👨💻 Freelance
📍Paris
Que es un
Router SPA?
🗂 Historial
🚦 Router
📦 Componentes
HTML5 history
Abstracto (SSR, no url)
Móvil
Creación de Rutas
API pública
View Link
⛓
Page.js
page('/users',(context, next) => {
// cargar la pagina de usuarios
next()
})
// aplicar guards
page('/users/:id/edit', checkUser, userProfileEdit)
Simple y flexible pero verboso
Page.js
Reach Router
<Router>
<Home path="/" />
<UserProfileEdit path="/users/:id/edit" />
</Router><div>
<Link to="/">Home</Link>
<Link to={`/users/${this.user.id}/edit`} />
</div>Reach router
Adaptado a React
🗂 HISTORIAL
🚦 ROUTER
📦 COMPONENTES
router.push('/search')
<router-view/>
🗂 HISTORIAL
-
Registro de rutas visitadas
-
Navegador ↔ URL
-
push() replace(), ...
-
listen()
🚦 ROUTER
-
Route matching
-
match()
-
-
Navegación
-
currentRoute
-
push() replace(), ...
-
beforeEach(), ...
-
-
Añadir rutas
-
new Router({ routes }) -
addRoutes()
-
📦 COMPONENTES
<router-view/><router-link to="/">Home</router-link>demo
te falta un "
ok grasias
Rutas dinamicas
{
path: '/users/:id',
name: 'UserProfile',
component: UserProfile,
}<router-link :to="{
name: 'UserProfile',
params: { id: '2' },
}">/users/2</router-link><a href="/users/2">/users/2</a><router-link to="users/2">
/users/2</router-link>this.$route
{
path: '/users/2',
name: 'UserProfile',
query: {},
params: { id: '2' },
meta: {}
}<p>Usuario: {{ $route.params.id }}</p>created () {
fetch(`/api/users/${this.$route.params.id}`)
.then(/* ... */)
}this.$route
props: true 👌
created () {
fetch(`/api/users/${this.id}`)
.then(/* ... */)
}{
path: '/users/:id',
name: 'UserProfile',
component: UserProfile,
props: true,
}demo
te falta un "
ok grasias
Guardas de
Navegacion
Global Guards
router.beforeEach((to, from, next) => {
// verificación de roles
// ...
// solo se puede llamar `next` una vez
next() // siguiente guard
next(false) // anula la navegación
next('/login') // redirige
})
router.afterEach((to, from) => {
// Analyticas, etc
})Per-route Guards
{
path: '/admin',
component: AdminPanel,
beforeEnter (to, from, next) {
if (isAdmin) next()
else next(false)
},
}in-component guards
export default {
name: 'AdminPanel',
data: () => ({ adminInfo: null }),
async beforeRouteEnter (to, from, next) {
const adminInfo = await getAdminInfo()
next(vm => {
vm.adminInfo = adminInfo
})
},
}in-component guards
export default {
name: 'Document',
async beforeRouteUpdate (to, from, next) {
if (await canReadDocument(to.params.id)) next()
else next(false)
},
}in-component guards
export default {
name: 'Document',
beforeRouteLeave (to, from, next) {
if (window.confirm('Salir sin guardar?')) {
next()
} else {
next(false)
}
},
}demo
te falta un "
ok grasias
beforeEach
beforeEnter
beforeRouteEnter
next()
next(false)
➡️ /admin
/admin
Lo no tan bueno
#sadreactsonly
Seguridad en Front ENd 🙅♀️
Los guardas before* son para UX no para evitar acciones de un usuario
Los guardas before* son para UX no para evitar acciones de un usuario
Los guardas before* son para UX no para evitar acciones de un usuario
Los guardas before* son para UX no para evitar acciones de un usuario
addRoutes()
✅ Previsto para
- Rutas que solo pueden ser añadidas durante
❌ No previsto para
- Ocultar rutas del usuario
- Lazy loading
vue-router/push-state.js
reach-router/history.js
EXCEPCIONES DE NAVEGADORES
Patreons 🙌
patreon.com/posva
Gracias! 🖖
Como funciona Vue Router
By Eduardo San Martin Morote
Como funciona Vue Router
Cuando desarrollamos una Single Page Application, es necesario usar un Router. Cada framework tiene su propio router, React incluso tiene varios paquetes disponibles. Y, aunque cada framework sea diferente y cada router tenga un enfoque diferente, todos comparten los mismos principios. Que se esconde destrás de una API simple y fácil de usar? Es realmente tán dificil implementar un router por sí mismo? Que cosas fallan hoy en día en Vue Router? Durante esta charla, responderemos a estas preguntas usando el Router oficial de Vue como ejemplo y explicando su funcionamiento interno.
