History mode of vue project

This time I will bring you the History mode of the vue project. What are the precautions when operating the History mode of the vue project. The following is a practical case, let's take a look.

But it is not difficult to find that the appearance of # is really ugly, and I don’t know what it does?

So I went to Stack Overflow to search, and sure enough~ It seems that Stack Overflow is really powerful. The problems you encounter in the project have actually been asked and solved on so.

This is the answer with the highest votes, which is to set the mode to history in vue2. After trying it, it really works!

But knowing that this will solve the problem, but not knowing why, it doesn't work. With the connection, we saw the documentation.

Therefore, this article extends to the understanding of the document. You can go to the document directly.　　

For single-page applications developed by vue, when we switch between different pages, we can find that there is always only one html. This is really the reason why it is called a single page, and vue-router Default hash mode - uses the hash of the URL to simulate a complete URL, so when the URL The page will not reload when changed. Because for a normal page, changing the URL will definitely lead to a change of the page. The page will not be reloaded until the query string and hash value in the URL are replaced. This is the truth here.

But #this form is really ugly! So, if you don’t want it, you can use the routing history mode! ! ! This mode makes full use of the history.pushState API to complete URL jumps without reloading the page.

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

After using this mode, there is no #, but you can access it like a normal URL.　　

However, to play well in this mode, you need background configuration support. Because our application is a single-page client application, if the background is not configured correctly, when the user directly accesses http://oursite.com/user/id in the browser, 404 will be returned, which is not good-looking.

Therefore, you need to add a candidate resource on the server side that covers all situations: if the URL does not match any static resource, it should return the same index.html page, which is the page your app depends on. .

Note: The backend of the project I am currently working on does not support this method, so I will use the # method for development first.

warn

A word of warning, because after doing this, your server will no longer return a 404 error page, because the index.html file will be returned for all paths. To avoid this, you should cover all routing situations in your Vue application and then present a 404 page.

const router = new VueRouter({
 mode: 'history',
 routes: [
 { path: '*', component: NotFoundComponent }
 ]
})

Or, if you are using Node.js as the backend, you can use server-side routing to match the URL, and return 404 when no route is matched, thereby implementing fallback.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of History mode of vue project. For more information, please follow other related articles on the PHP Chinese website!