Как настроить маршруты Vue или переопределить кнопку возврата, чтобы функционировать как приложение - PullRequest
Новая
       7

Как настроить маршруты Vue или переопределить кнопку возврата, чтобы функционировать как приложение

0 голосов
/ 27 мая 2019

Я создаю приложение 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 для выполнения такой операции возврата, или есть способ, которым я должен настроить маршрутизатор для этого , или функция, которая может выяснить текущий маршрут и подойти к нему?

1 Ответ

1 голос
/ 28 мая 2019

Звучит так, как будто бы это победило первоначальную цель навигации по историческим / посещенным страницам (вместо того, чтобы подниматься на один уровень вверх по маршрутам).

Я бы вместо этого добавил для этого отдельную кнопку возврата в приложении (как в приложениях Google есть); в противном случае вам, возможно, придется попытаться перехватить поведение браузера по умолчанию для этой конкретной кнопки, прослушивая событие popstate интерфейса Window, которое запускается при изменении активной записи истории. Но если вам нужно, есть обходной путь для этого с Global Before (навигация) Guards .

С помощью кнопки возврата в приложение (или технически "вверх"), о которой я упоминал ранее, вы можете использовать Встроенные элементы защиты .

Например, с учетом следующих 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' }">&lt;- 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>

Не обязательно лучший подход, но это должно сработать.

...