Nuxt.js - 腳本 this.$router.push('/') 不起作用

Question

我想在Nuxt.js支持腳本Router push 。 我已經使用Vue.js制作了一個網站，但它對SEO Vue.js 。 所以，我使用Nuxt.js制作了一個新的前端。 我將目錄 Vue.js 中的一些組件復制到 Nuxt.js 並運行，但會出現一些錯誤。

在Vue.js我使用this.$router.push('/users/Login')去Login頁面。 它運作良好。 但是在Nuxt.js它不起作用。

示例：當我在頁面http://localhost:8001/About -> 我點擊按鈕 Login -> URL 是http://localhost:8001/About# 時，這是錯誤的！

目錄： https : //imgur.com/a/YxGgXNI

我的Header.vue代碼（包括按鈕Login ）

短代碼：

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

完整代碼：

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

Answer 1

試試this.$router.push({ path: '/users/Login' ); 或者你可以試試這個

<b-button router to="/users/Login">Login</b-button>

Answer 2

你不應該在模板中引用它，它會起作用。

@click="this.clickToLogin"

應該只是

@click="clickToLogin"

Answer 3

我的問題是我試圖使用# as href 在錨標記上導航。

<a href="#" @click="redirectToMain()">

所以在 vuejs 導航發生期間，url 被更新為# ，vue 認為它是一個單獨的導航和停止導航過程。 在click事件上添加阻止解決了這個問題。

<a href="#" @click.prevent="redirectToMain()">

Answer 4

實際上，您可以使用以下代碼在 Nuxtjs 中更改路由。

this.$router.push("/");
or
this.$router.push({ path: '/'} );

假設，如果您現在查看此鏈接“http://localhost:3000”或“http://192.168.0.102:300”並嘗試通過使用給定代碼推送“/”來更改路由。 所以它不會工作。 因為，您已經查看了這條路線。 所以，Nuxtjs 路由不能改變。

為了處理這種情況，您可以使用以下技術：

if($nuxt.$route.path == '/') {
   //following 2 line code are sample code here put your need codes
   this.isLogin = false;
   this.user_full_name = 'My Account';
} else {
   // this.$router.push("/");
   this.$router.push({ path: '/'} );
}