The difference between history mode and hash mode

Let's first observe the browser address bar

Can you see this path with # in most browser paths? 

There are two working modes in the front end: hash and history

hash (Hash)

 Everything after the # number is considered a hash value (example: the pattern on the picture) The value after the # number will not be sent to the server as a path

Advantages: good compatibility

Disadvantages: the # sign is not good-looking

history

 Pros: slightly less compatible

Disadvantages: the path looks good (without #)

Q: So how do we decide on the mode?

答：mode:'hash/history'

For example: index.js

export default  new VueRouter({
  //写在这里
    mode:'history',

	routes:[
		{
			name:'XXX',
			path:'XXX',
			component:XXX,
		},

})

Q: Then how do we pack

Answer: Find the build file in the package.json file, where serve is used to run the file 

       And build can generate the purest HTML CSS JavaScript files from what we write

//打包代码
vue-cli-service build

Just look for that special folder again dist

Note: Only the files in the src directory are packaged

The packaged files must be placed on the server before they can be used——'deployment'

Use node.js and express to build a micro server and deploy it  

It's normal to not understand the following things. If you need a wider range of knowledge, you can find out.

The first step is npm init  

npm init //变成一个合理的包

The second step is npm i express

 npm i express //安装express

The third step is to introduce express

//引入express
const express =require('express')

//用一个app把他接住
const app=express()

//配置后段路由  /person  返回人的信息 
//req- request  res-response 
app.get('/person',(rēq，res)=>{
   res.sent({   //给客户端
         name：’tom‘，
         age：18
  })

})
//端口监听
app.listen(端口号，(err)=>{
     if(!err) console.log('服务器启动成功了！')  
})

The fourth step is to start the server node server

node server  //启动服务器

The fifth step is to create a new folder, generally called static (static)

            Put some front-end written things in it 

Q:  How to let the server know the page

Answer: We generally use the middle to complete 

//const app=require（'express'）

//中间介  express身上有个中间介 static 专门用于指定静态资源 需要传入一个路径
app.use(express.static(__dirname+'/static'))  

Step 6 Start the server node server

You can see the index.html page. By default, the index page is opened. If it is not the name index, you need to enter the name at the path.

Step 7 Copy the previously packaged html css and javascript files, and the project can be deployed on the server

It can also jump normally, but we found that he did not have a network request, and there will be problems as soon as he refreshes, see the picture below 

(Up and down network request)

 

 This is a path problem that belongs to history

Because there is no path after the # sign, and if there is no such path in our server, an error will be reported, and we can click to switch because the front-end routing jumps

There will be no such problems in the hash mode, because the things behind # are not considered as resources to find the server to ask for

The solution to the history 404 problem:

need backend staff  

We use node.js to solve this problem

Use server intermediary connect-history-api-fallback

The code is in the npm site 

first step:

//在服务器中运行
npm install --save connect-history-api-fallback

Step two:

//引入
const history = require('connect-history-api-fallback');

third step:

//使用  必须在静态资源之前进行使用
app.use(history())
//中间介  express身上有个中间介 static 专门用于指定静态资源 需要传入一个路径
app.use(express.static(__dirname+'/static'))