Методы перехода на другую страницу в Vue.js с помощью кнопки

Чтобы перейти на другую страницу в Vue.js с помощью кнопки, вы можете использовать различные методы. Вот несколько часто используемых подходов:

  1. Использование Vue Router: Vue Router — популярная библиотека маршрутизации для приложений Vue.js. Чтобы перейти на другую страницу, вы можете определить маршруты в конфигурации маршрутизатора и использовать компонент router-linkили объект $routerдля программной навигации. Например, вы можете использовать атрибут torouter-linkили метод $router.push(), чтобы указать целевую страницу.
<router-link to="/another-page">Go to Another Page</router-link>
<!-- or -->
<button @click="$router.push('/another-page')">Go to Another Page</button>
  1. Использование window.location.href. Вы также можете перейти на другую страницу, изменив свойство window.location.href. Этот метод полезен, когда у вас нет настройки маршрутизатора или вам необходимо выполнить простую навигацию без какой-либо дополнительной логики.
<button @click="redirectToAnotherPage">Go to Another Page</button>
<script>
  methods: {
    redirectToAnotherPage() {
      window.location.href = '/another-page';
    }
  }
</script>
  1. Использование this.$router.push: если у вас есть доступ к экземпляру Vue, например, в методе компонента Vue, вы можете использовать this.$router.push()для перехода на другую страницу.
<button @click="redirectToAnotherPage">Go to Another Page</button>
<script>
  methods: {
    redirectToAnotherPage() {
      this.$router.push('/another-page');
    }
  }
</script>

Это несколько методов, которые вы можете использовать для перехода на другую страницу в Vue.js с помощью кнопки. Не забудьте настроить необходимую конфигурацию маршрутизации, если вы решите использовать Vue Router.