An overview of the
React Router (React-router-dom) and Vue Router both provide a routing management mechanism to manage page hops in single-page applications. Although the two have different application scenarios, we can do some analysis and comparison between them.
The same
First of all, let’s analyze their similarities as follows:
-
The Router works the same way
Both the Vue router and the React Router work in the same way, based on window.history.
When you need to jump to a page, Through the window. The history. PushState (window. History. ReplaceState, window. The location. The hash, window. The location, replace) method in the browser Add or modify history, and then re-render the page. The registered popState (Hashchange) event is triggered when a history is activated through the browser’s forward or backward buttons, or through the go, back, forward, and other methods, and the page is rerendered.
Throughout the application, a Location object is built to hold the URL information for the page. The location object is responsive, and when a page jump occurs, the location object is updated and the page is rerendered.
-
Both have hash mode and history mode
React Router and Vue Router both work in hash mode and history mode.
The page URL format is protocol://hostname: port/ XXX/XXX, which is more beautiful. When switching pages, window.location. pathName is changed.
Hash mode. The page URL format is protocol://hostname: port/ XXX/XXX /#/ XXX. When switching pages, just change window.location.hash.
Using the history pattern requires server-side support by adding a candidate resource on the server that covers all cases.
-
Both support programmatic navigation
In vue Router, we can access the push, replace, back, Go, and forward methods of the router instance (this.$router) in the page component for programmatic navigation.
In the React Router, we can get the history object in the page component using props. History or hooks, Programmatic navigation is then implemented through the push, Replace, back, Go, and forward methods provided by the history object.
-
The current URL information can be accessed in the page component
In the Vue Router, we can access the URL information of the current page in the page component through the $route attribute of the component instance. $route.path, $route.hash, $route.query, and $route.params correspond to the path, hash value, query part, and route parameter of the current URL respectively.
In the React Router, you can get the location object in the page component via props. Location or hooks, and then access the URL information for the current page using the location object. Location. path, location.hash, location.query, and location.state correspond to the path, hash value, query part, and route parameter of the current URL respectively.
When the page is refreshed, the parameters passed by the user are lost when the page is redirected.
-
Both support dynamic route matching
In vue router, we can access dynamic routing parameters with $route.params.
In the React Router, we access dynamic routing parameters in the page component by obtaining the Params object via props. Match. Params or hooks.
-
Both support nested routines
-
Both support lazy route loading
Vue Router and React Router both require webpack and other tools to implement lazy loading of routes, and are implemented based on dynamically building script elements to load JS files.
To be continued…
different
The differences between the two are sorted out as follows:
-
Page jump (render) trigger mechanism is different
The difference in page rendering trigger mechanism between vue and React is mainly due to the different principles of reactive implementation.
When using the Vue Router, a responsive attribute – $route – is built to the root Vue instance during application startup to hold page URL information. The $route attribute maintains a dependency list-DEPS to which components that use router-view are added. When we jump to a page via push(replace) or activate history, we modify $Route and then notify the component in DEPS to update and rerender the page.
When using the React Router, the Router component builds and initializes a component instance during rendering. During initialization, state.location is defined to hold the page URL information. When we jump to a page by push(replace) or activate the history, the setState method updates the state.location, which triggers the update and rerenders the page.
-
Different hash modes are implemented
The React router implements the hash mode based on window.location.hash(window.location.replace) and hashchange. When jumping to a page via push, modify window.location.hash directly and render the page; When reconnecting to a page using replace, a temporary URL will be created after the hash is modified, and then the temporary URL will be used to replace the current URL with window.location.replace, and then the page will be rendered. When activating history causes the hash to change, the Hashchange event is fired to rerender the page.
Unlike the React router, the Vue router uses the Hash mode to create or modify history records in the browser using pushState(replaceState) and then render the page. When a history is activated, the PopState event is triggered to re-render the page. If the browser does not support pushState, the window.location.hash(window.location.replace) and hashchange implementations are used.
-
The history mode does not support pushState
When using the React Router, if the history mode does not support pushState, the react router reloads the page (window.location.href = href) to redirect the page.
When using the Vue router, if the History mode does not support pushState, the fallback configuration item is used for the next step. If fallback is true, revert to hash mode. If fallback is false, jump to the page by reloading the page.
-
Route interception is implemented differently
Vue Router provides global guard, route guard and component guard for route interception.
The React Router does not provide guards like the Vue Router, but we can implement route interception ourselves during component rendering. For class components, we can use props. History in componentWillMount or getDerivedStateFromProps to implement route interception. If it is a functional component, implement route interception in the function method using the history object returned by props. History or useHistory.
-
Lazy loading is implemented differently
During lazy route loading, the Vue Router first obtains the JS file corresponding to the lazy route loading page. The lazy page will be rendered only after the JS file corresponding to the lazy page is loaded and executed.
React Router During lazy loading of routes, the react Router obtains the JS file corresponding to the lazy loading page and renders the loading page. When the JS file corresponding to the lazy page is loaded and executed, the update is triggered and the lazy page is rendered.
-
Static Route Configuration
When a Vue router is used, an instance of the router is first built through the VueRouter. When you build a Router instance, you pass in a static route configuration, called routes, that establishes mappings between path and Component, name and Component, and parent pages. When we jump to a page, we will first find the matching page component (and sub-page component) according to the provided path(name), then determine the URL of the page, and then render the router-View component into the corresponding page.
This mechanism of vue-router leads to peer routing. Generally, only one router-view component is required.
The React Router is different in that it does not use static route configuration. When we jump to a page, because there is no static Route configuration, we cannot immediately find the matching page according to the pathname provided by the jump. We can only traverse Route components in the rendering process, do matching one by one, and then render the matching Route components and page components.
The React-Router mechanism usually requires as many Route components as there are peer routes.
To be continued…