How to redirect to home page after logout in nuxt?

Question

after login in site i want when i click to specific button , user log out from site to home page.

here is my template code:

<template>
  <nav id="header" class="navbar navbar-expand header-setting">
    <div class="main-content">
          <div class="notification" @click="LogOut()"></div>
      </div>
    </div>
  </nav>
</template>

and here is my script code:

export default {
  name: 'HeadeAfterLogin',
  methods: {
    LogOut() {
      localStorage.removeItem('token')
    }
  }
}

any one can help me to complete LogOut function ?

Answer 1

Inside your component you have access to this.$router

So you can easily do:

export default {
  name: 'HeadeAfterLogin',
  methods: {
    LogOut() {
      localStorage.removeItem('token')
      this.$router.push('/')
    }
  }
}

Answer 2

What I am doing is:

Component:

### html 
<a href="#" class="dropdown-item" @click.prevent="signOut">LogOut</a>

### script
export default {
    methods: {
      signOut() {
        this.$auth.logout();
      }
    }
}

nuxt.config.js

auth: {
    strategies: {
        ...
    },
    redirect: {
        login: '/login',
        logout: '/login', # after logout, user will be redirected here.
        home: '/'
    },
}