0

I need help with checking for router changes under three different circumstances:

  • When the user enters a url in a brand new page. In this case, the route is for setting initial state. (In this case, on some controls, I check for an initialised flag to determine whether to set state)

  • When a user performs an action on the page when the page is loaded and that action changes the route.

  • When a user enters a url whilst the page is loaded. The intuitive behaviour should be to set page state. However, because I'm not sure how to distinguish this type of event from the second type, these events are ignored.

Is there a way to differentiate between the 2nd and 3rd types?

zcaudate
  • 13,998
  • 7
  • 64
  • 124
  • 1 - Try to add watch on your router and add some conditions on your routing inital it goes to app.vue use beforemount lifecycle method. 2. same things goes here add a valid check on router file and use updated lifecycle method 3 . You can add a dailog box on url change to sask user if user want to continue or not [ref](https://router.vuejs.org/guide/essentials/dynamic-matching.html#) – Pallav Chanana May 05 '20 at 06:10
  • [Ref Link](https://router.vuejs.org/guide/essentials/dynamic-matching.html#) – Pallav Chanana May 05 '20 at 06:15

1 Answers1

0

  1. You can put a initial variable in the data section of your root Vue instance and initialize it as true - it will show your components that this is the first route since the page has been loaded in the browser. Then in the beforeEach hook of your router you will set this variable to false - but only when the from argument of the hook has a non-empty matched array (or if its name key is not null - considering all your routes have a name) so that you can skip the entering into the first route / and only clear the initial variable when you leave the initial route. Or you can use the beforeRouteLeave hook in the relevant component for / route which will clear the variable instead of beforeEach hook.

  2. You can put a watcher inside the relevant page to watch for changes in $route - or you can use the beforeRouteLeave hook in the relevant components (I prefer the latter)

  3. You can install an event handler for the beforeunload event on the window object to detect when the user types a new URL. This will also be triggered when you close the tab (or browser). You may want to look at https://stackoverflow.com/a/26275621 for a non-universal solution.

IVO GELOV
  • 13,496
  • 1
  • 17
  • 26
  • I'm not quite understanding. So you would set a var when the user is typing in the url? I think that will work but I don't understand steps 1 and 2 – zcaudate May 06 '20 at 18:07
  • steps 1 and 2 expect that you know what the Vue watches are - or you know about the navigation guards of Vue-Router. – IVO GELOV May 06 '20 at 19:05
  • I know what they are. – zcaudate May 07 '20 at 01:23
  • Step 2 suggests that you either use `watch: { $route(newValue, oldValue) { ... user is switching routes inside your application - so do something } }` or `beforeRouteLeave(to, from, next) { ... user is going away from the current route - so do something but do not forget to call next() or otherwise the route won't be changed }` – IVO GELOV May 07 '20 at 06:37