seo Question posted in
Some basic information to get you started with this can be found here.

Nuxt.js – Script this.$router.push('/') not working – SEO

I want to support script Router push in Nuxt.js.
I already make a website using Vue.js but it’s not good for SEO.
So, I make a new front-end using Nuxt.js. I copy some components from directory Vue.js to Nuxt.js and run but it takes some error.

In Vue.js I use this.$router.push('/users/Login') to go to Login page. It’s working well. But in Nuxt.js it’s not working.

Example: When I’m on the page http://localhost:8001/About -> I click button Login -> The URL is http://localhost:8001/About#, it’s wrong!

Directory: https://imgur.com/a/YxGgXNI

My Header.vue code (include button Login)

Short code:

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

Full code:

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

4

Answers


  1. 0

    Try this.$router.push({ path: '/users/Login' ); or alternatively You could try this

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

    Login or Signup to reply.
  2. 0

    You shouldn`t reference this in template and it will work .

    @click="this.clickToLogin"

    should be just

    @click="clickToLogin"
    Login or Signup to reply.
  3. 0

    My issue was that I was trying to navigate on anchor tag with # as href.

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

    So during vuejs navigation was taking place, the url was being updated with #, and vue considered it as a separate navigation and stop navigation process. Adding prevent on the click event resolved this issue.

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

    Login or Signup to reply.
  4. 0

    Actually, you can use following codes for change route in Nuxtjs.

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

    Suppose, In case if your now viewing this link "http://localhost:3000&quot; or "http://192.168.0.102:300&quot; and trying to change route by push using given code to route "/". so it will not working.
    Because, you already viewing this route.
    So, Nuxtjs route cant not change.

    For handling this case you can using following technique:

    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: '/'} );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search