CODEWITHSUNDEEP
routesresourcesvue.jssingle-page-applicationvue-router
Andrey Ugryn
Andrey Ugryn

Reputation: 91

I have page refreshing on vuejs single page app

I built single page app on vuejs and I have next situation:

I'm using vue-router and vue-resource. Nav menu works correctly. When I'm clicking on link in menu, part of the page changing without page refreshing. But when I'm trying to use redirect on another page...

this.$router.go('/about');

...the whole app refreshing.

How to do url change without page refresh?

P.S. Also I tried to use:

window.location.href = "/about";

But it have the same result.

Thanks!

Upvotes: 2

Views: 2411

Answers (2)

CuriousGuy
CuriousGuy

Reputation: 4138

Most of the cases you will be using <router-link :to="/about"> in the nav menu of Single page application. Similar method in Vue API is router.push('/about') . This is method internally called when you clicked nav button.

template

<button @click="goToAbout()">About</button>

script

methods: {
          goToAbout: function () {
            this.$router.push('/about')
          },
}

Your use of this.$router.go('/about'); is wrong here as in, it is used to navigate backwards in history stack of the browser. This API only expecting an integer which is the number of steps.

If you use `window.location.href = "/about" , its purely a high level browser function and beyond VUE spa .

Upvotes: 3

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

try using

this.$router.push('/about');

$router.go(n) takes an integer that indicates by how many steps to go forwards or go backwards in the history stack, similar to window.history.go(n)

That's the reason your page is getting refeshed

You can see more about programatic navigation here

Upvotes: 3

Related Questions