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?
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>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
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');
}
}
