Каков рекомендуемый подход для предотвращения навигации для подпрограммы?

Question

Приятная вещь о beforeRouteLeave заключается в том, что вы можете предотвратить навигацию в определенных условиях.

У меня есть настройка, которая использует подпрограмму для отображения части страницы. Я бы хотел, чтобы навигационная защита в подпрограмме не переключалась на другую, если данные не сохранены.

{ 
    path: '/customers/view', 
    component: ViewCustomerShell, 
    children: [ 
     {path: ':id', name: 'ViewCustomer', component: ViewCustomer} 
    ] 
}, 

Так что, когда я посещаю/клиент/вид/12 и внести изменения, если они пытаются загрузить/клиент/вида/13, я хочу, чтобы выскочить обычное подтверждение и потенциально остановить навигацию. Так как beforeRouteLeave не вызывается в этой ситуации, каков рекомендуемый подход для предотвращения навигации? Кажется, что смотреть $ route будет слишком поздно, потому что тогда навигация уже произошла.

Примечание: Как упоминалось выше, beforeRouteLeave не вызывается в этой ситуации; он не работает.

Примечание: Использование «onbeforeunload» не работает, поскольку оно срабатывает только при изменении всей страницы.

Answer 1

Вы можете использовать объект $route внутри своего компонента, чтобы посмотреть, не изменится ли он, а затем поднять подтверждающий режим ... Это будет вызвано при каждом изменении маршрута!

const Baz = { 
    data() { 
    return { saved: false } 
    }, 
    template: ` 
    <div> 
     <p>baz ({{ saved ? 'saved' : 'not saved' }})<p> 
     <button @click="saved = true">save</button> 
    </div> 
    `, 

    watch: { 
    '$route': function() { 
     if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) { 
     // do something ... 
    } 
    } 
} 

Answer 2

Я также писал один и тот же ответ here.

Dynamic route matching специально разработан для того, чтобы разные маршруты или URL-адреса отображались на один и тот же маршрут или компонент. Следовательно, изменение аргумента технически не считается уходом (или изменением) маршрута, поэтому beforeRouteLeave по праву не увольняется.

Однако, я предлагаю, чтобы можно было выполнить компонент, соответствующий маршруту, ответственному за обнаружение изменений в аргументе. В принципе, всякий раз, когда изменяется аргумент, записывайте изменение, а затем меняйте его (мы надеемся, что разворот будет достаточно быстрым, чтобы пользователь остался незамеченным), а затем попросите подтверждения. Если пользователь подтверждает это изменение, используйте свою запись для «отмены» изменения, но если пользователь не подтвердит, сохраните все, как есть (не меняйте обратное направление).

Я не проверял это лично, и поэтому я не гарантирую его работу, но, надеюсь, он бы очистил любую путаницу в отношении того, какая часть приложения несет ответственность за проверку того, какие изменения.