[Vuejs]-How to navigate to a different .html page in Vue.js

by

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>
👤Aaron Angle

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

👤Nikolay Yankov

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

👤Allen Liu

Leave a comment