page('/users',(context, next) => {
  // cargar la pagina de usuarios
  next()
})

// aplicar guards
page('/users/:id/edit', checkUser, userProfileEdit)

<Router>
  <Home path="/" />
  <UserProfileEdit path="/users/:id/edit" />
</Router>

<div>
  <Link to="/">Home</Link>
  <Link to={`/users/${this.user.id}/edit`} />
</div>

<router-view/>

<router-link to="/">Home</router-link>

{
  path: '/users/:id',
  name: 'UserProfile',
  component: UserProfile,
}

{
  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(/* ... */)
}

created () {
  fetch(`/api/users/${this.id}`)
    .then(/* ... */)
}

{
  path: '/users/:id',
  name: 'UserProfile',
  component: UserProfile,
  props: true,
}

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
})

{
  path: '/admin',
  component: AdminPanel,
  beforeEnter (to, from, next) {
    if (isAdmin) next()
    else next(false)
  },
}

export default {
  name: 'AdminPanel',

  data: () => ({ adminInfo: null }),

  async beforeRouteEnter (to, from, next) {
    const adminInfo = await getAdminInfo()
    next(vm => {
      vm.adminInfo = adminInfo
    })
  },
}

export default {
  name: 'Document',

  async beforeRouteUpdate (to, from, next) {
    if (await canReadDocument(to.params.id)) next()
    else next(false)
  },
}

export default {
  name: 'Document',

  beforeRouteLeave (to, from, next) {
    if (window.confirm('Salir sin guardar?')) {
      next()
    } else {
      next(false)
    }
  },
}