Как настроить маршруты Vue или переопределить кнопку «Назад», чтобы она работала как приложение
Я создаю приложение Cordova Vue. Во многих случаях есть более глубокие ссылки, подобные этой
/profile/:id/:contact_type/contacts:contact_id
Где бы вы сначала были на /profile/:id, а затем нажмите на ссылку, чтобы перейти к /profile/:id/:contact_type/contacts:contact_id
Стандартный router.go(-1) отлично работает, если вы были на странице профиля первым. Но если вы получаете уведомление или что-то еще, и отправляются с любой страницы, например /settings/:id. Ваша кнопка «Назад» должна вести себя как кнопка «Вверх». Нажатие /profile/:id/:contact_type/contacts:contact_id должно привести вас к /profile/:id, а не /settings/:id.
Как мне это настроить? Я попробовал несколько вещей, таких как разделение текущего маршрута на / и извлечение его, а затем обратное соединение и нажатие на него. Но это не работает с параметрами, особенно если их больше 1.
const path = router.currentRoute.path
const URLSplit = path.split('/')
URLSplit.length = URLSplit.length - 1
const newTarget = URLSplit.join('/')
if (newTarget) {
router.push(newTarget)
} else {
router.push('/home')
}
Я также пытался использовать дочерние маршруты, но для этого требуется router-view на каждой странице, а это не то, что я хочу делать.
Я уже зафиксировал операцию кнопки «Назад», я просто хочу знать, есть ли способ настроить Vue для выполнения такой операции «назад», или есть ли способ, которым я должен настроить маршрутизатор для этого, или функция, которая может вычислить текущий маршрут и пройти по нему?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это звучит так, как будто это противоречит первоначальной цели навигации между историческими / посещенными страницами (вместо того, чтобы подниматься на один уровень в маршрутах).
Вместо этого я бы добавил для этого специальную кнопку «Назад» в приложении (например, в приложениях Google она есть); в противном случае вам, возможно, придется попытаться перехватить поведение браузера по умолчанию для этой конкретной кнопки, прослушивая popstate событие интерфейса Window, который запускается при изменении активной записи истории. Но если вам нужно, для этого есть обходной путь с Глобальный До (навигация) Охранники.
С кнопкой «Назад» в приложении (или технически «вверх»), о которой я упоминал ранее, вы можете использовать Встроенные защитные устройства.
Например, при следующих настройках routes...
const router = new Router({
mode: 'history',
routes: [
{
path: '/profile/:id',
name: 'profile',
component: Profile,
children: [{
path: ':contact_type/contacts:contact_id',
name: 'contact',
component: Contact
}]
}
]
})
... вы бы напрямую определили средства навигации по маршруту внутри компонента маршрута (например, Contacts.vue):
<template>
<div>
<router-link :to = "{ name: 'profile' }"><- back to profile</router-link>
Some contact information.
</div>
</template>
<script>
export default {
beforeRouteLeave(to, from, next) {
if (from.name === 'contact' && to.name !== 'profile') {
next({
name: 'profile',
params: {
id: from.params.id
}
});
}
else {
next();
}
}
}
</script>
Не обязательно лучший подход, но он должен работать.