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: '/'} );
}