What is front-end routing
Intraditional multi-page applications, each page is an independent HTML file. When you click a link or navigate, browse The server will reload the entire page, including the page's layout, styles, scripts, etc. This usually requires server-side processing and results in a refresh and re-rendering of the page. In a single-page application, the initial page loading only happens once. Dynamic interaction is achieved through technologies such as JavaScript. When the user interacts with the application, only part of the page content is updated without reloading the entire page. This makes single-page applications faster, more responsive, and provides a better user experience.
Single-page applications usually use front-end frameworks (such as React, Angular, Vue, etc.) to manage routing and state. An application's views are organized into components, each component is responsible for rendering specific content. When the user interacts with the application, he switches to the corresponding component through the routing system and obtains data from the backend API as needed. After these data are updated, only the relevant components or parts of the content need to be updated without reloading the entire page.
Why use routing
You can change the content of the web page without refreshing the web page, and the user experience is better.
The core of front-end routing
- Change the URL, but the page will not refresh as a whole
- While the website does not refresh as a whole when interacting with users, local content can be changed.
- Front-end rendering hands over the rendering task to the browser and solves the page construction through the client, which greatly relieves the pressure on the server. And combined with front-end routing, the seamless page switching experience is naturally user-friendly.
Implementation method: hash mode and history mode
is implemented in two ways, hash mode and history mode. The difference reflected in the URL is whether it contains #, # represents hash mode, if not, it is history mode.
When rendering in either React or Vue front-end framework, there are usually two routing methods: hash and history.
The hash routing mode renders different content by listening to hash changes in the URL. It does not send requests to the server.
The history routing mode is to monitor URL path changes and requires client and server support.
hash mode
Implementation principle:
hashisURL hash(#) and the following part are often used as anchor points to navigate within the page. Change the URL in The hash part will not cause the page to refresh. The hash routing mode renders different content by listening to hash changes in the URL. The browser will not initiate a routing request to the server for the path after the # sign. That is to say, when you request a https://juejin .cn/#123 and https://juejin.cn/ actually go to the server to request the content of https://juejin.cn/
Changes in the hash will trigger the hashchange event to listen for changes in the URL, render the corresponding page, change the URL through the browser forward and backward, and change through tags URL, changing the URL through window.location, changing the URL in these situations will trigger the hashchange event.
Commonly used APIs
window.location.hash = '123' // 设置 url 的hash，会在当前url后加上 '#123'
let hash = window.location.hash
console.log(hash) //#123
window.addEventListener('hashchange', function(){
// 监听hash变化
})
history mode
Implementation principle:
History routing mode monitors URL path changes and requires client and server support.
The history route will use the method of the window.history object, which provides methods to operate the browser's session history.
back（）：后退到浏览器会话历史上一次；
forward（）：前进到浏览器会话历史下一次；
go（number）：转到指定某一次浏览器会话历史，正数为前进，负数为后退；
pushState（state,title,url）：前进到指定URL，会将URL数据push进会话历史中；
replaceState（state,title,url）：将URL替换当前路径；
The above methods will only modify the URL of the current page and will not send a request. After refreshing the browser, an http web page request will be sent to the server, so if you use the history routing mode, server-side configuration is required.
You may still be confused after reading this, why history needs to be configured
The difference between history routing (URL without hash part, based on HTML5 History API) and hash routing The main differences areURL structure and browser behavior. Hash routing does not require additional server configuration because it uses the hash part (#) in the URL to manage routing, and this part is not sent to the server. In contrast, hash routing only switches routes in the client, and the server only handles requests for the entry point of the application (usually index.html).
The reason why ordinary routing requires additional server configuration is:
URL structure: The URL structure of ordinary routing is #-free, such as http://example.com/route. So when a user accesses these URLs in the browser, the browser sends the request to the server instead of just doing a routing switch within the client. The server needs to know how to handle these requests in order to return the application's pages correctly.
Page refresh: When a user refreshes a page that contains a normal route, the browser will send a request with a specific routing path to the server. The server must be able to map these requests to the application's entry points so that the front-end router can re-render the correct view. This requires server configuration to ensure this mapping and processing.
Bookmarking and sharing links: Normally routed URLs are more beautiful and semantic, making them easier to use for bookmarking and sharing links. However, this also requires the server to be able to handle these URLs correctly.
Hash routing avoids the above problems because the hash part is not sent to the server, so the server does not need to handle it specially. Hash routing is a solution to provide front-end routing without additional server configuration, especially suitable for simple single-page applications, or for rapid development and prototyping without complex server configuration. However, plain routing generally provides better-looking URLs, so with support for modern browsers, it may be the more attractive option.
Application in vue:
You can read this articleRouting-front-end routing
Reference articles
A brief discussion of front-end routing
Front-end development: Give you an in-depth understanding of the two routing modes
Routing -Front-end routing