Как перейти на другую страницу. html в Vue. js

Question

Привет, ребята, я пытаюсь нажать кнопку на моей Vue. js странице на другую. html страницу, которая существует в моей папке publi c. Итак, я использую этот способ

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

Однако я получаю сообщение об ошибке, в котором говорится:

«Свойство или метод« window »не определены в экземпляре, но упоминаются во время рендеринга»

Как перейти на другую страницу в Vue. js?

Answer 1

Я бы рекомендовал использовать vue -маршрутизатор, если вы используете спа-подход. Это предотвратит обновление вашей страницы, когда вы go перейдете на другую страницу, и это будет намного быстрее. Но если вы не хотите этого делать, вы можете просто использовать тег привязки для управления навигацией за вас.

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

Answer 2

Вы можете попробовать вызвать метод @click="navigateToTestHtml" и поместить в него свой код

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

Однако, поскольку Vue является одностраничным приложением, я думаю, было бы лучше создать другую страницу и добавить для него маршрутизацию. Vue Документы маршрутизации

Answer 3

Вы не можете записать «окно» в тег кнопки, потому что окно не определено. Я предлагаю записать в «методы», например:

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

Но если вы используете vue . js, рекомендую использовать vue -маршрутизатор. Одна страница позволяет перейти на другую страницу, например:

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

vue - использование навигации по маршруту