This article has participated in the "Newcomer Creation Ceremony" event and started the road to gold mining creation together.

Preface

In the vue project, our more commonly used modes are hash and history mode. By default, the vue project uses the hash mode. Some people don’t understand why the server needs to be configured accordingly and how to configure it in the history mode, so this article Let’s analyze this. The focus is to let everyone understand why server configuration is required in history mode. Here we will explain both hash mode and history mode. Through comparison, we can better understand our behavior.

1. hash mode

1.1 What is hash mode

Let’s start with a familiar anchor tag case to help you understand what the hash mode is.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style-type: none;
        }

        li {
            line-height: 30px;
        }

        div {
            height: 800px;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#lish">历史沿革</a></li>
        <li><a href="#mingren">名人典故</a></li>
        <li><a href="#jinri">今日发展</a></li>
        <li><a href="#weilai">未来规划</a></li>
    </ul>

    <div id="lish">
        <h3>历史沿革</h3>
        历史沿革历史沿革历史沿革历史沿革历史沿革历史沿革历史沿革历史沿革
    </div>
    <div id="mingren">
        <h3>名人典故</h3>
        名人典故名人典故名人典故名人典故名人典故
    </div>
    <div id="jinri">
        <h3>今日发展</h3>
        今日发展今日发展今日发展今日发展今日发展今日发展
    </div>
    <div id="weilai">
        <h3>未来规划</h3>
        未来规划未来规划未来规划未来规划未来规划未来规划未来规划未来规划
    </div>
</body>

</html>

The running effect is as shown below

[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-Fml94SPI-1656308482823)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp /767af1a4809e4ffebaf84f2f848fef5f~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

Summarize:

When clicking the link, it does not jump to other pages
When clicking the link, jump within the current page
When clicking the connection, the part after # in the address bar changes

The part after this # is called hash

http://127.0.0.1:5500/hash.html#weilai

Such as the following code

<a href="#lish">历史沿革</a>

When the href value of the hyperlink is not a certain page, but uses a hash value, the page jump will not occur. This is very important.

vue-router takes advantage of this feature to switch different components for rendering after the hash value of the address bar changes.

1.2 Features of hash mode

In terms of browser support, Hash mode is relatively strong and is even compatible with lower versions of IE browsers.
The only drawback is that he looks ugly

2. history mode

The HTML5 History API provides a history.pushState and history.replaceState method (browser support is not very optimistic), which allows developers to change the URL of the site without refreshing the web page.

We will not explain the HTML5 History API in detail here.

Through the following configuration, you can enable the history mode of vue-router

const router = new VueRouter({
  routes,
  mode: 'history',
})

The address in the address bar is as follows

http://localhost:8081/food

Without hash, it looks much more pleasing to the eye.

3. Problems with history mode

In the address bar used below, a douyin path will appear after the domain name + port. This is because we implemented it based on the previous article "Deploy multiple vue projects with one domain name". After reading the previous article, you will Got it. If you practice by yourself, just ignore this path.

The history mode is very good and looks very beautiful, but beautiful people are generally not easy to raise.

In a production environment, the history mode has a relatively big problem, that is, when manually refreshed, a 404 error will be reported.

Let’s demonstrate it again, look at the animation below

[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-hyjRmoiU-1656308482823)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp /b056ddc3ccd74a9685be41651c6b7b35~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

Let’s review what we just did

① Enter in the address bar http://localhost:8080/douyin/, the page displays normally, and the upper navigation can be seen, but there is no specific content because there is no matching "/" in the routing rules.

② Click on several navigations in sequence and you can switch normally. Click play to enter the details page without any problem.

③ When the address in the address bar changes to http://localhost:8080/douyin/knowledge(knowledge can also be changed to quadratic or food), then manually refresh the page (hit Enter or F5 to refresh in the address bar), and the page will finally report 404

④ If the routing mode is hash mode, the above problem will not occur. You can try it yourself.

5. Find the reason

Whether it is hash mode or history mode, enter the following address in the browser

http://localhost:8081/douyin

The browser will definitely send a request to the server

We also know that the default request must be index.html in the directory (this is the default setting of many servers)

Index.html references js, css and other files, so let’s look at the following and request some other resources.

So, we can see a page like this

When we click on the navigation in the page

If it is hash mode, when the hash in the address bar changes, the browser will not send a request to the server, so it will match the routing rules and then switch components.
If it is history mode, click navigation, and after the address bar changes, h5's history API will be used for navigation, and the browser will not send a request to the server.

However, when we browse to an address, such as http://localhost:8080/douyin/knowledge(in hash mode, the address is http://localhost:8080/douyin/#/knowledge), hit Enter in the address bar, or refresh the page, the behavior of the two is different.

1. Hash mode

In hash mode, only the part in front of the hash is regarded as the address, so it will re-request to the server, and the server will http://localhost:8080/douyin/still return index.html. This file will then download the imported js, css and other files, and then according to the address bar The hash value matches the route, so after the refresh, the page content is consistent with the page content before the refresh (because the hash value has not changed)

2. History mode

In history mode, all addresses in the address bar will be regarded as request addresses, so after refreshing, this address will be requested from the server.

Under our front-end project, there is only one index.html and some js, css, pictures and other files. There are no requested resources at all, so the server returns 404.

What I use here is http-server, a simple server. The behavior of other servers is basically the same. For example, the 404 returned by nginx is as follows

Summary: Now we have found the reason for 404 in history mode, and also understand the difference between hash mode and history mode.

5. Solution

Now that the problem has been found, there will naturally be ideas for solving it.

In order to be closer to reality, our server this time uses nginx

First copy the douyin project to the root directory of nginx, then open the nginx configuration file (here Nginx1.15.11\conf\vhosts\0localhost_80.conf is selected), and add the following line of configuration

try_files $uri $uri/ /admin/index.html;

The function of the above code is to configure the url rewrite statement. Note that it is rewriting, not redirecting.

Rewrite the browser content without changing the URLindex.html , because this index.htmlis the entrance to our project, index.htmlwhich will read the packaged at that time app.js, and the routing configuration can be read to implement the routing corresponding to the URL of our browser. page

Restart nginx and refresh the browser at will. The 404 problem will no longer occur.

As the note on the picture says:

① The browser requests http://localhost/douyin/knowledgenginx and finds that there are no resources, so it returns 404

② nginx then returns index.html. After the browser is loaded, it loads the js, css and other files referenced in it, and then the routing rules match the corresponding components for rendering based on the address in the address bar.

6. Summary of routing modes

In addition to being ugly, the hash mode has many advantages, such as no need for server configuration and good compatibility, so it is used by companies such as NetEase Cloud Music.

history has outstanding appearance, but the server needs some configuration, but it is not complicated.

The server here is separated from the front-end and back-end. The server-side in development is not a concept. It refers to back-end services such as java and php.

The server here refers to the server deployed by the front-end project, such as nginx, apache, etc., so configuration needs to be done in the configuration files of these servers.

Server configuration in vue routing mode and history mode