servicio_social_front/layouts/error.vue

<template>
  <section class="hero is-light is-bold is-fullheight">
    <div class="container hero-body">
      <transition name="slide-fade" appear>
        <div class="columns">
          <div class="column">
            <b-image :src="require('@/assets/404.webp')" alt="404 image" />
          </div>

          <div class="column">
            <h2 class="title">ERROR 404 LA PÁGINA NO HA SIDO ENCONTRADA</h2>

            <b-button type="is-dark" @click="redireccionar()" outlined>
              Ir a la página principal
            </b-button>
          </div>
        </div>
      </transition>
    </div>
  </section>
</template>

<script>
export default {
  methods: {
    redireccionar() {
      if (
        localStorage.getItem('token') &&
        localStorage.getItem('idUsuario') &&
        localStorage.getItem('usuario') &&
        localStorage.getItem('nombre') &&
        localStorage.getItem('idTipoUsuario') &&
        localStorage.getItem('tipoUsuario')
      )
        this.$router.push(`/${localStorage.getItem('tipoUsuario')}`)
      else localStorage.clear()
    },
  },
  layout: 'login',
}
</script>

<style scoped>
.title {
  margin-top: 40%;
}

.slide-fade-enter-active {
  transition: all 2s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>