Preface:

Vue routing has an HTML5 History mode, which has to be enabled separately in routing. Many people do not know this mode before they start using routing, so they do not enable it, and then deploy the project because it has many advantages, and eventually enable this mode.

However, there are still some problems with switching from hash mode to histroy mode. I have stepped over the holes, and then write out these problems. Friends in need can make a reference, like you can point bozan, or pay attention to it, I hope to help you.

This post was originally posted on my blog:obkoro1.com

Enable history mode:

If this function is not enabled, the route is in hash mode by default. If this function is enabled, the front-end work is simple as follows:

Mode: 'history' // Configure this in the routeCopy the code

Finally, some configuration coordination needs to be done at the back end. Here you can refer to the documentation for chestnuts.

Advantages of the History mode:

  1. Urls become real urls, urls look better.

    http://yoursite.com/#/a/b // Hash mode http://yoursite.com/a/b //history modeCopy the code

  2. You can use vue-router’s scrolling behavior, which is very useful for remembering the location before entering other pages. Configure it and use it directly, provided that histroy mode is enabled.

  3. When similar projects introduce wechat JS-SDK, some operations have requirements on URL. Url cannot be carried with ‘#’. If histroy mode is not enabled, it may cause problems.

  4. For example, vue-CLI configuration, it is based on the route to enable the history mode of the standard configuration (will be described below), if not enabled, you need to configure another.

Hash mode before Histroy mode

As mentioned at the beginning, the problem here refers to the problems caused by deploying projects online in Hash mode and then turning on histroy mode.

1. Unable to find resources:

In hash mode, CSS, JS, and image resources cannot be found if they are packaged directly. Baidu then changes the configuration operation as shown in the following screenshot to assetsPublicPath: ‘/’ to assetsPublicPath: ‘./’.

In hash mode, configuration as above is no problem. I thought there was something wrong with vue-CLI configuration. Actually, there was nothing wrong with vue-CLI configuration.

And then after histroy mode is enabled, because we changed the assetsPublicPath property, we’re going to put that. Leave it out and change it back to: assetsPublicPath: ‘/’

2. The request fails due to the route

The correct request is:

HTTP :www.xxx.com/api/ interface // API is the proxy name that I forward the address through proxyTableCopy the code

After starting histroy mode:

In layer-2 routing, this happens:

The route is: HTTP :www.xxx.com/a/b HTTP :www.xxx.com/api/a/ interface // This causes the request to fail. It is correct to remove a as wellCopy the code

The solution:

Since I’m using AXIos, I can set a baseURL in the global request, which is the website address of the project (HTTP :www.xxx.com), and the layer 2 route will automatically remove the a and B.

3. The problem of cookies

This was actually not a problem, it was all my own, and I divided the project into two layers. So if you log in from A and refresh from B, there will be no cookies.

Layer 2 routing http://yoursite.com/a http://yoursite.com/bCopy the code

This is because whether the cookie can be retrieved depends on the location of the stored route. Previously, the hash mode was used because the hash mode urlhttp://yoursite.com/#/a/b will be uniformly stored under http://yoursite.com.

The history mode cookie will be stored under http://yoursite.com/a or http://yoursite.com/b, and there will be no cookiie on the other side.

Solutions:

  1. Do not divide the routes into two layers. Ensure that all routes are under the same routing address.

  2. Store cookies in path:’/’, the root address of the project route.

  3. Use sessionStorage to store information, I am using this method, use method.

    SessionStorage can be accessed at http://yoursite.com, whether it is stored on A or B.

The latter

The above is all the content of this article. It is suggested to directly talk to the back end at the beginning of the project to open the Histroy mode, so as to avoid various pits in the back. The above content is my own after stepping on the pit blood and tears lessons, I hope to help friends in need, finally Merry Christmas.

Finally: if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions. Then is the hope of watching the friends point a like, can also pay attention to me. Personal blog and Nuggets personal homepage

The above 2017.12.25