Nuxt.js - Script this. $ Router.push ('/') ne fonctionne pas

Je souhaite prendre en charge le script Router push dans Nuxt.js . Je crée déjà un site Web en utilisant Vue.js mais ce n'est pas bon pour le SEO . Donc, je crée un nouveau front-end en utilisant Nuxt.js . Je copie certains composants du répertoire Vue.js vers Nuxt.js et je l'exécute mais cela prend une erreur.

Dans Vue.js j'utilise ceci. $ Router.push ('/ users / Login ') pour accéder à la page Login . Ça marche bien. Mais dans Nuxt.js cela ne fonctionne pas.

Exemple: quand je suis sur la page http: // localhost: 8001 / About -> Je clique sur le bouton Login -> L'URL est http: // localhost: 8001 / About # , c'est faux!

Répertoire: https://imgur.com/a/YxGgXNI

Mon code Header.vue (inclure le bouton Connexion ) p>

Code court:

    <template>
      <b-navbar sticky toggleable="md" class="navbar-dark bd-navbar" type="dark">
        <b-navbar-toggle target="bd-main-nav" />
        <b-navbar-brand to="/">My Blog</b-navbar-brand>
        <b-collapse
          is-nav
          class="justify-content-between"
          id="bd-main-nav">
          <b-navbar-nav>
            <b-nav-item exact to="/">Home</b-nav-item>
            <b-nav-item to="/ReviewBooks">Review Book</b-nav-item>
            <b-nav-item to="/LifeSkills">Life Skills</b-nav-item>
            <b-nav-item to="/About">About</b-nav-item>
            <!-- <b-nav-item to="InsertBlogPost">New Post</b-nav-item> -->
          </b-navbar-nav>
          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-item v-if="this.isLoggedIn==true">     
              <span v-show="userName.length > 0" class="align-middle ml-2 text-color">
                {{userName}}
              </span>
              <b-button size="sm" class="my-2 my-sm-0 btn-outline-light btn-space" @click="clickToSignOut">
                Sign out
              </b-button>
            </b-nav-item>
            <b-nav-item v-else>
              <b-button size="sm" class="my-2 my-sm-0 btn-outline-light" 
                @click="this.clickToLogin"
                >Login
              </b-button>
            </b-nav-item>   
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </template>

    <script>
    export default {
        name: 'Header',

        data() {
          return {
            userName:'',
            profileUrl:'',
            isLoggedIn: false
          }
        },

        mounted() {
          if (this.$session.exits()) {
            let userObject = this.$session.get('loggedInUser')
            this.userName = userObject.name ? userObject.name : ''
            this.profileUrl = userObject.profileUrl ? userObject.profileUrl : ''
            this.isLoggedIn = userObject ? true : false
          } else {
            this.userName = ""
            this.profileUrl = ""
            this.isLoggedIn = false
          }
        },

        methods: {
          clickToLogin() {
            this.$router.push('/users/Login');
          },
          clickToSignOut() {         
            this.userName = ''
            this.profileUrl = ''
            this.isLoggedIn = false           
            // this.$emit('clickToSignOut')   
            this.$session.destroy()
            this.$router.push('/')
          }, 
        }
    }
    </script>

    <style scoped>
      .navbar {
        background-color: rgba(99, 13, 133, 0.9) !important;
      }
      .btn-space {
        margin-left: 5px;
      }
    </style>

Code complet:

    <script>
    export default {
        name: 'Header',
        data() {
          return {
            userName:'',
            profileUrl:'',
            isLoggedIn: false
          }
        },
        methods: {
          clickToLogin() {
            this.$router.push('/users/Login');
          },
        }
    }
    </script>