Javascript Nuxt.js-编写此脚本。$router.push（'；/'；）不工作

我想在

numxt.js

中支持脚本

路由器推送

。 我已经用

Vue.js

创建了一个网站，但是它对

SEO

不好。 因此，我使用

Nuxt.js

创建了一个新的前端。我将一些组件从目录Vue.js复制到Nuxt.js并运行，但会出现一些错误

在

Vue.js

中，我使用

this.$router.push（'/users/Login'）

进入

Login

页面。它工作得很好。但是在

Nuxt.js中它不起作用

示例：当我在页面->我点击按钮登录->URL是，它是错误的

目录：

My
Header.vue
code（包括按钮
Login
）

短代码：

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


导出默认值{
名称：'标题'，
数据（）{
返回{
用户名：“”，
配置文件URL:“”，
伊斯洛格丁：错
}
},
方法：{
单击tologin（）{
这是.$router.push（'/users/Login'）；
},
}
}

完整代码：

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


我的博客
家
评论书
生活技能
关于
{{userName}}
退出
登录
导出默认值{
名称：'标题'，
数据（）{
返回{
用户名：“”，
配置文件URL:“”，
伊斯洛格丁：错
}
},
安装的（）{
如果（此.$session.exits（））{
让userObject=this.$session.get（'loggedInUser'））
this.userName=userObject.name？userObject.name:'
this.profileUrl=userObject.profileUrl？userObject.profileUrl:“”
this.isLoggedIn=userObject？true:false
}否则{
this.userName=“”
this.profileUrl=“”
this.isLoggedIn=false
}
},
方法：{
单击tologin（）{
这是.$router.push（'/users/Login'）；
},
单击ToSignout（）{
this.userName=''
this.profileUrl=“”
this.isLoggedIn=false
//此.$emit（'clickToSignOut'）
这是。$session.destroy（）
这是。$router.push（“/”）
}, 
}
}
navbar先生{
背景色：rgba（99,13,133,0.9）！重要；
}
.btn空间{
左边距：5px；
}
试试这个。$router.push（{path:'/users/Login'）；

或者你也可以试试这个

---

登录

您不应该在模板中引用此项，它将起作用

@click="this.clickToLogin"

应该是公正的

@click="clickToLogin"

---

我的问题是，我试图使用href在锚定标记上导航

因此，在vuejs导航过程中，url被更新为

#

，vue将其视为一个单独的导航和停止导航过程。在

单击
事件中添加阻止解决了此问题

实际上，您可以在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: '/'} );
}