I have a Vue application and need to know when a user is about to navigate out of my application.
I have a beforeRouteLeave in place that triggers an alert if I go from myvueapp.nl/example to myvueapp.nl/example2 however if I navigate from myvueapp.nl/example to www.google.nl it doesn't trigger.
The reason I need to do this is the following:
You can navigate to /example/123 and this will open the example page and open a modal showing the user data of person 123. when you close this modal a router.go(-1) will be triggered. This allows me to use nested modal views. However if you go from google.com directly to /example/123 and then close the modal you will be send back to google.com. My idea was to check where a user is about to navigate to and if it is outside my domain I will check if the modal is open. is the modal open then close that instead of navigation. If it was already closed then let the user go on their way.
How can I know when a user is about to navigate out of my application?
Related
Login popup does have the separate url. Login is done by modal popup. So I want to sent a link by email so that the user can click on the link and it will directly opens the login popup.
Is there any solution using vue js
While checking the query params it is returning login object but based on that how I will check the condition
I'm fairly new to AbortController and so far I've only used it in useEffect callbacks. However, I have a screen in my React Native app which allows the user to click a button to open a dialog; in the background the button click causes an axios call to the api, and then the retrieved information is shown in the dialog.
But what happens if the user clicks the button and then quickly navigates away? In this case, the information doesn't need to be retrieved, and it can't be displayed once it's been retrieved anyway.
Is there a way to handle this? ie can I set up an AbortController and then if the user navigates away from the screen, abort the signal so that the api call gets cancelled?
I don't know If I understand you correctly, but you can use useEffect cleanup function to cancel axios request. About cleanup function: https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm.
If you want you can prevent user to go back, until axios fetching is done-> https://reactnavigation.org/docs/preventing-going-back/
I am working on a APP, where I created a button that navigates you to other page. I imported react native router and use history from react-router dom.
I created seperated folder with login routs (when user is on login screen he can move to sign-up)
Loginrouts.js :
than I created login.js where the button is, it uses useHistory.push() and it calls signup from loginroute.js
But when button is pressed it only shows blank screen, anyone knows why?
In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.
If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.
I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.
I like to open a modal dialog if the page was rerouted during an auth error (usually thats rerouted to /account/Login).
I have a Durandal modal dialog which I like to trigger if the user hits /#/Login somehow.