Why should hash and history
For this type of progressive front-end development framework for Vue, in order to build SPA (single-page application), it is necessary to introduce front-end routing system, which is the meaning of existence Vue-Router. Core front-end routes, is that - while not changing the view request to the backend.
To achieve this, the browser currently provides support for the following two:
- hash - that is, the URL address bar of the # symbol (this is not a cryptographic hash in the hash operation). For example, this URL: http: //www.abc.com/#/hello,hash value of # / hello. It is characterized by: hash, although present in the URL, but will not be included in the HTTP request, there is no effect on the back end, thus changing the hash will not reload the page.
- history - using the new in HTML5 History Interface to pushState () and replaceState () method. (Requires a specific browser support) these two methods used in the browser's history stack, the current existing back, forward, foundation go on top, they provide functionality to modify history. Only when they perform the modification, although the change of the current URL, but not the browser sends a request to the backend immediately.
Therefore we can say, hash pattern and history model belong to its own browser features, Vue-Router just use these two features (interface provided by calling the browser) to achieve front-end route.
scenes to be used
In general scenario, hash and history can, unless you care more about the color values, the # symbol in the URL inclusion does look somewhat beautiful.
If you do not want to hash ugly, we can use history routing mode, this model take advantage of history.pushState API URL to complete the jump without having to reload the page. - Vue-router official website.
In addition, according to introduce Mozilla Develop Network, call the history.pushState () compared to directly modify the hash, the following advantages:
-
The new URL pushState () set to the current URL can be any URL homologous; and hash # can only be modified rear section, you can only set the current URL with the URL of the document;
-
pushState () to set a new URL can be exactly the same with the current URL, it will also add the record to the stack; and the new hash value must be set with the original not the same as to trigger the action will add records to the stack;
-
to pushState () can be added to any type of data to the recording parameter by stateObject; and add only short strings hash;
-
to pushState () may be additionally provided the title attribute for subsequent use.
Of course, history is not everything is good. When the SPA although its capability in the browser, but you really want to initiate HTTP requests to the back-end through URL, the difference between the two came. Especially after the user manually enter the URL enter, or refresh (restart) browser time.
-
The hash mode, only the hash symbols before content is included in the request, such as http://www.abc.com, so the rear end, even if there is no route to achieve full coverage, does not return 404 error.
-
The history mode, the front end of the URL and the URL must initiate a request to the rear end of the actual consistency, such as http://www.abc.com/book/id. If the backend lack of / book / id route processing, returns a 404 error.
Vue-Router official website in such a description: "However, this mode you want to play well, but also the background configuration support ...... So, you want to add a candidate resources to cover all situations in the service side: if the URL match any static resources, you should return the same index.html page, which is dependent on your app page. "
The history mode configuration Nginx
Nginx root directory of the deployment:
Nginx server's default directory is / usr / share / nginx / html, you need to upload static files in the dist directory to the local directory.
In the /etc/nginx/conf.dfind under default.confthe configuration file, you can add the following configuration:
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html; // 后端配置
}
summary
Examples of its own, for general Vue + Vue-Router + Webpack + XXX Web form development scenario, can use history mode, only the rear end (Apache or the Nginx) simple routing configuration, while the front end of the route with 404 page support.
Scan code concerned about micro-channel public number, better communication
