Shulou(Shulou.com)05/31 Report--

This article mainly explains "the method of server-side configuration of vue-router history mode". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the method of server-side configuration of vue-router history mode".

History routing

History pattern refers to a pattern that uses HTML5's historyAPI to implement client routing, which is typically represented by removing the # from the url path in hash mode. It is very easy to turn on history mode when using Vue-Router, you only need to pass in the mode:'history' configuration item when instantiating routing, but without server support, historyAPI-based routing cannot access the specified page directly from the url address bar, which is easy to understand, because entering and entering in the url address bar is equivalent to sending a GET request, so the routing path without # is the same as a normal API interface. Since the server does not define such an interface, it is normal for 404 pages to appear during direct access.

Official example

Officials have provided many ways to deal with this scenario, taking the node.js version as an example:

Const http = require ('http') const fs = require (' fs') const httpPort = 80http.createServer ((req, res) = > {fs.readFile ('index.htm',' utf-8', (err, content) = > {if (err) {console.log ('We cannot open "index.htm" file.')} res.writeHead (200,{ 'Content-Type':' text/html) Charset=utf-8'}) res.end (content)}) .console.log (httpPort, () = > {console.log ('Server listening on: http://localhost:%s', httpPort)})

It is not difficult to see that its processing idea is that all requests are forcibly redirected to the home page, which is equivalent to the server shielding the situation where access resources do not exist, while leaving the routing work to the client to handle, so that the front-end route with history mode enabled will not report an error when it is located directly to the child page.

Vue-router history mode configuration

The history mode of vue-router requires that the mode in the routing configuration be set to history and be configured on the server side.

Compared with hash mode, there are fewer symbols such as # in the url of the page in history mode:

Hash:www.example.com/#/login

History:www.example.com/login

In a single-page application, the browser requests the page from the server in history mode, but the page does not exist on the server side, so it returns 404. So at this point, you need to configure the server side: except for static resources, you need to return the index.html of a single-page application.

Server configuration-nodejs

You need to introduce the connect-history-api-fallback module in the nodejs server to handle the history schema and use this module before using middleware that handles static resources:

Const path = require ('path') / / Import modules that handle history patterns const history = require (' connect-history-api-fallback') const express = require ('express') const app = express () / / register middleware app.use (history ()) that handles history patterns / / middleware app.use that handles static resources (express.static (path.join (_ dirname,'. / web')) app.listen (3000) () = > {console.log ('service started at port 3000')})

Server configuration-nginx

First, put the packaged files under the html folder, then open the nginx.conf file under the conf folder, and modify the configuration as follows:

Http {#... other config server {#... other config location / {root html; index index.html index.htm; try_files $uri $uri/ / index.html } Thank you for your reading. The above is the content of "the method of server-side configuration of vue-router history mode". After the study of this article, I believe you have a deeper understanding of the method of server-side configuration of vue-router history mode, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.