У меня есть интересная проблема в моем приложении vue. js, и я не знаю, как ее решить.
У нас есть страница «Мои объявления», на которой отображается сетка объявлений, созданных пользователем. Когда они нажимают на одну из них, они попадают на страницу сведений о листинге. Он открывает эту страницу в новой вкладке браузера.
Мы хотим добавить новый компонент в верхнюю часть страницы, который показывает пользователю статистику из их списка. Но мы хотим, чтобы этот компонент отображался ТОЛЬКО, когда они попадают на страницу сведений о листинге со страницы «Мои списки». Есть и другие способы попасть на страницу с подробностями о листинге, и мы не хотим, чтобы компонент статистики отображался, когда они поступают этими другими способами.
Я думаю, это можно обработать в маршрутизаторе. Я попытался проверить, смогу ли я определить, что пользователь переходит со страницы «Мои списки» с помощью параметра «from» в методе beforeEach (...) маршрутизатора. Я сделал это:
router.beforeEach(async (to, from, next) => {
console.log('from=', from);
console.log('to=', to);
});
Когда он печатает параметр from, я получаю следующее:
to= {
fullPath: "/"
hash: ""
matched: []
meta: {}
name: null
params: {}
path: "/"
query: {}
}
Он не содержит информации о том, откуда он появился. Я предполагаю, что это потому, что он открывает страницу с подробностями о листинге в новой вкладке. Поэтому я не могу использовать маршрутизатор, чтобы определить, откуда пришел пользователь.
Вместо этого я прибег к использованию localStorage:
На странице «Мои объявления»:
<v-btn :href="`/listings/${listing.listingId}`" target="_blank" @click="saveFromMyListings();">View Listing</v-btn>
...
saveFromMyListings() {
localStorage.setItem('from-my-listings', true);
},
На странице сведений о листинге:
async created () {
this.fromMyListings = localStorage.getItem('from-my-listings') === 'true';
localStorage.setItem('from-my-listings', false);
},
При условии, что я установил для элемента from-my-listings в localStorage значение false сразу после того, как использую его, чтобы определить, что пользователь пришел со страницы «Мои списки». , оно работает. Таким образом, он устанавливается ТОЛЬКО, если пользователь заходит со страницы Мои списки, и никогда не устанавливается, если пользователь приходит откуда-то еще.
Проблема с этим методом заключается в том, что если пользователь обновляет страницу, статистика исчезнуть. Очевидно, это связано с тем, что created () запускается повторно, и на этот раз from-my-listings удаляется из localStorage. Я могу исправить это, не установив для него значение false в created () после его использования, но тогда где мне его удалить таким образом, чтобы он гарантированно был удален независимо от того, как пользователь покидает страницу (ввод нового URL-адреса непосредственно в браузер, закрывая браузер, компьютер теряет питание, эт c.)?
Есть ли в vue. js какой-нибудь другой перехватчик, кроме created (), который запускается только один раз (когда пользователь впервые посещает страницу), но не при последующих загрузках (например, refre sh)? Есть ли способ передать реквизиты компоненту в маршрутизаторе на основе состояния localStorage, который не нужно будет снова передавать при refre sh? Какие еще есть решения этой проблемы?