CODEWITHSUNDEEP
htmlvue.js
Mystery Man
Mystery Man

Reputation: 645

How to navigate to a different .html page in Vue.js

Hi guys I am trying to click a button in my Vue.js page to a different .html page that exist in my public folder. So I am using this way

      <button @click="window.location='public/test.html'">See Results</button>

However I get an error that says

"Property or method "window" is not defined on the instance but referenced during render"

How do i navigate to a different page in Vue.js?

Upvotes: 0

Views: 2569

Answers (3)

Allen Liu
Allen Liu

Reputation: 1

You can't write 'window' into button tag, because window is not defined.I suggest that can write into 'methods',eg:

methods: {
  goToHtml() {
    window.location = 'public/test.html';
  }
}

But, if you use vue.js, I recommend you use vue-router. One page navigate to another page, eg:

methods: {
  goToPage() {
    this.$router.push('/another/page');
  }
}

vue-router navigation usage

Upvotes: 0

Aaron Angle
Aaron Angle

Reputation: 494

I would recommend using vue-router if you're doing the spa approach. It will prevent your page from refreshing when you go to a different page and it will be much faster. But if you don't want to do that you could just use an anchor tag to handle the navigation for you.

 <a href="/test.html">
 <button>See Results</button>
 </a>

Upvotes: 2

Nikolay Yankov
Nikolay Yankov

Reputation: 376

You can try to call a method @click="navigateToTestHtml" and put your code in it

methods: {
   navigateToTestHtml() {
      window.location='public/test.html'
   }
}

However, as Vue is a Single Page Application I think it would be better to create another page and add routing for it. Vue Routing Docs

Upvotes: 1

Related Questions