Two working modes of the router and the process of quickly building a micro server through express to solve the problem of refreshing page server 404

History mode and hash mode

First of all, this # is called hash, and the biggest feature is that it will not be sent to the server with the http request.

The default mode is hash mode. If you want to modify it, you can configure the mode attribute in index.js in the router.

 

The most direct difference between them is whether there is # and the history mode is slightly less compatible than the hash mode. There is also an online difference.

 Npm run build packages, and then generates a dist file.

Why do we pack?

The browser does not recognize the .vue file, and webpack needs to pack it into html so that the browser can recognize it 

And the packaged files need to be deployed on the server

Now we use the express framework to quickly build a tiny server

1. Create a new folder demo

2.npm init

3. Give the package a name, called lesson

The following content can be entered directly

 4.npm i express

5. In the folder, right-click to create a new server.js

6. Enter content in the file

const express=require('express')

const app=express()

app.get('/person',(req,res)=>{
    res.send({
        name:'tom',
        age:19
    })
})

app.listen(5005,(err)=>{
    if(!err) console.log('服务器请求成功');
})

 7. Open the server node server.js

Then put our saved static page into static.

If we need to access it in the server, we need to add app.use(express.static(__dirname+'/static'))

Stop the server and you will be able to access this page again

 Then put the file generated by our dangdang scaffolding into it, reopen it, and it will be fine.

Then I found that it doesn't matter if you click, but if you refresh, it will be directly abolished

 Because, your refresh is equivalent to sending a network request, but there is no such configuration under the server you configured, only /person

This history mode has this mode, but the hash mode does not have this problem

 Of course, this is not very beautiful and requires the cooperation of our back-end programmers. Here is a node and middleware solution

connect-history-api-fallback solve connect-history-api-fallback through this - npm (npmjs.com)

 

 Then reference, configure it

Note that it must be used before static resources (app.use(express.static(__dirname+'/static')))

app.use(history())

 Then restart the server and you can use it

 Summarize

* For a url, what is the hash value? —— # and the content after it is the hash value.
* The hash value will not be included in the HTTP request, that is: the hash value will not be brought to the server.
* Hash mode:
  1. There is always a # sign in the address, which is not beautiful.
  2. If the address is shared through a third-party mobile app in the future, if the app checks strictly, the address will be marked as illegal.
  3. Good compatibility.
* History mode:
  1. The address is clean and beautiful.
  2. Compared with the hash mode, the compatibility is slightly worse.
  3. When the application is deployed and launched, it needs the support of the back-end personnel to solve the problem of refreshing the page server 404.