Как сделать программную навигацию без изменения url в vue-router + vue3?

Для того чтобы реализовать программную навигацию без изменения URL в Vue Router с использованием Vue 3, можно воспользоваться механизмом динамических компонентов вместо механизма маршрутизации. Вот пример того, как этого можно добиться:

1. Создайте компоненты, которые будут отображаться в зависимости от "навигации", например, компоненты Home, About и Contact.

2. В корневом компоненте вашего приложения (например, в App.vue), используйте директиву v-if или v-show, чтобы показывать нужный компонент в зависимости от текущего состояния навигации.

<template>
  <div>
    <button @click="navigate('home')">Home</button>
    <button @click="navigate('about')">About</button>
    <button @click="navigate('contact')">Contact</button>
    
    <component :is="currentComponent" />
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const currentComponent = ref('home');

    const navigate = (page) => {
      currentComponent.value = page;
    }

    return {
      currentComponent,
      navigate
    };
  }
}
</script>

3. Таким образом, при клике на кнопки "Home", "About" или "Contact" будет отображаться соответствующий компонент, без изменения URL.

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