0
votes

Comment accéder à une autre page .html dans Vue.js

Salut les gars, j'essaie de cliquer sur un bouton de ma page Vue.js vers une autre page .html qui existe dans mon dossier public. J'utilise donc de cette façon

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

Cependant j'obtiens une erreur qui dit

"La propriété ou la méthode" window "n'est pas définie sur l'instance mais référencée lors du rendu"

Comment puis-je accéder à une autre page dans Vue.js?


0 commentaires

3 Réponses :


1
votes

Vous pouvez essayer d'appeler une méthode @ click = "navigateToTestHtml" et y mettre votre code

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

Cependant, comme Vue code > est une application à page unique, je pense qu'il serait préférable de créer une autre page et d'ajouter un routage pour celle-ci. Documentation de routage Vue


4 commentaires

comment est-ce que j'achemine? la documentation est horrible


Voici un exemple standard de l'autre documentation: vuejs.org/v2/guide/routing.html < / a> Fondamentalement, vous chargez un composant enfant différent lors du changement d'itinéraires.


Un autre exemple - tutoriel: flaviocopes.com/vue-router


ils n'appliquent pas tous des exemples pratiques.



2
votes

Je recommanderais d'utiliser vue-router si vous utilisez l'approche spa. Cela empêchera votre page de se rafraîchir lorsque vous allez sur une autre page et ce sera beaucoup plus rapide. Mais si vous ne voulez pas faire cela, vous pouvez simplement utiliser une balise d'ancrage pour gérer la navigation à votre place.

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


0 commentaires

0
votes

Vous ne pouvez pas écrire 'window' dans la balise button, car window n'est pas définie.Je suggère que cela puisse écrire dans 'methods', par exemple:

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

Mais, si vous utilisez vue .js, je vous recommande d'utiliser vue-router. Une page permet d'accéder à une autre page, par exemple:

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

utilisation de la navigation vue-router


0 commentaires