0

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?

3 Answers 3

2

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>

Sign up to request clarification or add additional context in comments.

Comments

1

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

4 Comments

how do I route? the documentation is horrible
Here is one standard example of the other documentation: vuejs.org/v2/guide/routing.html Basically, you load different child component when changing routes.
Another example - tutorial: flaviocopes.com/vue-router
they all do not apply practical examples.
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.