Vue-Router global function execution on route change - javascript

So my query is that is there a way to get Vue-Router to execute a function/method after route changes? More specifically, after the route has been mounted successfully.
Currently, I do loading function that evaluated to true once the user clicks away from the initial screen. And each page has a mounted function (repeated across all my vue pages) that sets the loading to false.
I want to have it such that the router detects this change, sees if the new routed component has been mounted and then executes a function to set the loading to false.
I use a dedicated router.js file to contain all my routes and params for it and then call that file in the main app.js file that mounts the view for the user.

Related

Rerun nuxt route middleware if store getter changes without reloading the page?

Given following middleware, whats the best way to rerun the logic when ever store.getters.authenticated changes, and not only on the initial load.
middleware/auth.js
export default function ({ store, redirect }) {
if (!store.getters.authenticated) {
return redirect({ name: "login" })
}
}
You asked how to rerun it inside of the middleware itself, which is the 2nd part of a possible middleware trigger (like if the user is not authenticated anymore while staying on the same page) and without any specific action, like when using polling or websockets I thought.
Meanwhile, the 1st part is the easiest: call the middleware globally (in nuxt.config.js) to trigger it on each page navigation.
If he stays on the same page, you can also move with the router as you did but at this point, checking if there is an error in your axios is maybe more appropriate since it's the initiator.
I also do like to use this.$nuxt.refresh() to trigger all the checks when switching accounts globally, helps re-running all those tasty fetch() hooks.

How correctly suspend react routing process in SPA?

There is a website, the front is written by ReactJS. For the correct operation of the CEO, SSR is used.
The algorithm is like:
1 page load
the browser opens / foo;
SSR checks if is in the cache /foo does not find it;
SSR renders on the server and executes the react application on request / foo;
SSR puts in the cache HTML, which turned out as a result of the render process / foo;
SSR gives to the browser an HTMLL, which was the result of the render process / foo;
The browser performs asynchronous requests, which are HTML, which is the result of the / foo render (CSS, JS, favicon ...);
the loaded application react "understands that the page has already been drawn and that it's not necessary to perform routing and so on";
The react processes the user's further actions (as in a regular SPA).
Subsequent Updates
the browser opens / foo;
SSR checks if is in the cache /foo does not find it;
SSR renders on the server and executes the react application on request / foo;
SSR puts in the cache HTML, which turned out as a result of the render process / foo;
gives to the browser an HTMLL, which was the result of the render process / foo;
The browser performs asynchronous requests, which are HTML, which is the result of the / foo render (CSS, JS, favicon ...);
the loaded application react "understands that the page has already been drawn and that it's not necessary to perform routing and so on";
The react processes the user's further actions (as in a regular SPA).
The problem is at the front that every time the page is refreshed, routing is started and the entire application is drawn anew, and thus “flicker” appears, that is point 7 does not work.
Question: Is it possible to stop this rendering at a certain moment? Tell the route that it’s not necessary to draw it right now. Maybe there is any popular solution?
You can use lifecycle method shouldComponentUpdate. You can set your own logic in the method for the component to be re-rendered or not. shouldComponentUpdate class method has access to the next props and state before running the re-rendering of a component. That's where you can decide to prevent the re-render by returning false from this method. If you return true, the component re-renders.

setState Before Route Change

I have an authentication state that I use through the Provider/Consumer context API in React 16.
I initially set the state of this property in my main App to false and then for any restricted components (i.e. that require being authenticated) I make a query to the backend to check if the current token on the client-side is valid.
Thus, I want authentication to always be consumed as false initially by any components when users change browser URLs.
How can I reset authentication on each route change? I am listening on history.listen but if I call setState there is no guarantee that authentication will get set to the false state before the component initially renders.

auth route componentWillMount or DidMount did not trigger when navigate?

I have a component as 'middleware' where it check for condition and trigger some function, it work when user enter into the page (I mean initial load) or user refreshed the page. But componentWillMount or componentDidMount won't trigger if user enter the path via <Link>?
https://codesandbox.io/s/r433m6kvvp
Because componentWillMount and componentDidMount are the mounting methods, not updating methods, they will not get called on component re-rendering.
Solution:
You need to do one change, put the BrowserRouter here:
render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
And use componentWillReceiveProps inside Auth component, for initial rendering componentDidMount will get called and for each route change componentWillReceiveProps will get called, you can execute the function at both the places.
Working Code.

How to 'freeze' redux state during a route change?

My app uses react-router, redux, react-redux. Lets say I'm currently looking at /about route which renders the AboutPage component. Now I want to navigate to /news. Right now, when the route change happens the new component mounts, which fires off async actions to fetch the data. While that data is being fetched I am looking at the NewsPage component but with loading spinners.
What I'm trying to do is stay on the AboutPage component while all that data fetching is happening. I have successfully implemented the data fetching during react-router's onEnter hook. The problem is that, if AboutPage happens to use any of the same redux state as NewsPage, you'll see rendering changes while the data is being fetched and updated.
What I'd like is to somehow 'freeze' the current route while actions/state-changes are happening behind the scenes, and then render the new route component when thats ready (in the meantime users will see loading feedback via https://github.com/rstacruz/nprogress).
So either I need to completely unsubscribe the current route component from state changes or otherwise lock stuff in. Not sure if redux even exposes what I need but curious if others have solved this.

Categories