Программная навигация и useRouter
Композируемые модули router.push(), router.replace(), router.go(), useRouter() и useRoute()
«Программная навигация и useRouter» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Навигация из кода
Помимо RouterLink, часто требуется выполнять навигацию из JavaScript — например, после отправки формы или входа в систему. Композабл useRouter предоставляет экземпляр маршрутизатора для этой задачи.
Получение маршрутизатора
Вызовите useRouter() внутри <script setup>. Возвращаемый объект предоставляет push, replace, go и другие методы.
import { useRouter } from 'vue-router'
const router = useRouter()Навигация с помощью push
router.push добавляет запись в стек истории — так же, как нажатие ссылки. В простейшей форме ему передаётся строка пути.
router.push('/dashboard')Вызов push с объектом маршрута
Также можно передать объект с полями name, params и query. Именованные маршруты избавляют от необходимости жёстко задавать пути.
router.push({
name: 'user',
params: { id: 42 },
query: { tab: 'profile' }
})Replace: без записи в истории
router.replace выполняет навигацию без добавления записи в историю, поэтому кнопка «Назад» пропускает этот переход. Используйте его после входа в систему, чтобы пользователь не мог вернуться на страницу входа.
router.replace('/dashboard')Переход назад и вперёд
router.go(n) перемещается по истории на n шагов. router.go(-1) возвращает на одну страницу назад, а router.go(1) — на одну страницу вперёд.
function goBack() {
router.go(-1)
}После асинхронного действия
Типичный сценарий: отправьте форму, дождитесь результата, а затем выполните навигацию. push возвращает Promise, завершения которого можно дождаться с помощью await.
async function login() {
await auth.signIn(form)
router.push('/dashboard')
}Чтение текущего маршрута
Чтобы прочитать параметры и строку запроса текущего маршрута, используйте композабл useRoute. Не путайте его с useRouter: useRoute — это маршрут, а useRouter — средство навигации.
import { useRoute } from 'vue-router'
const route = useRoute()Доступ к параметрам
Читайте динамические сегменты через route.params. Для маршрута /user/:id идентификатор находится в route.params.id.
const userId = route.params.idДоступ к строке запроса
Читайте строку запроса через route.query. Для ?tab=profile используйте route.query.tab.
const tab = route.query.tabРеакция на изменения параметров
Поскольку route является реактивным, отслеживайте его с помощью watch, чтобы реагировать на изменение параметров, оставаясь в том же компоненте.
import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Быстрая проверка
Проверьте свои знания о программной навигации.
Итоги
Вы изучили программную навигацию:
- useRouter() предоставляет push, replace и go.
- push добавляет запись в историю, replace — нет, а go(-1) возвращает назад.
- push принимает строку пути или объект { name, params, query }.
- useRoute() читает текущие params и query и является реактивным.
Часто задаваемые вопросы
Урок «Программная навигация и useRouter» бесплатный?
Да — полный текст урока «Программная навигация и useRouter» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Программная навигация и useRouter»?
Композируемые модули router.push(), router.replace(), router.go(), useRouter() и useRoute() Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Программная навигация и useRouter»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Мета-поля маршрутов и типизация
- Переходы между маршрутами и анимация
- Настройка поведения прокрутки
- Программная навигация и useRouter