vue 路由器的两种工作模式history和hash模式

要点： 

 

 红色框内容为hash 不会通过http发送请求给服务器

发送请求时不会管你这个hash值/#/xxxx/xxx/xxx/xxx/xxx

 但是不写成hash值就会找不到

 vue中默认开启得时hash模式

还有一种模式为history模式

在路由配置中配置一个新的配置项

mode:‘history’   //不写默认为hash

发现路径上没有#了没有hash值了

 

然后hash得话兼容性要比history好一点,一些旧的浏览器也支持

 

还有区别：

当你要上线时要对项目进行打包

使用build文件打包

 

 运行npm run build

完成后会出现dist文件夹

发现里面css html js都有

 

而这边直接打开是没什么东西得需要进行在服务器上进行部署才能生成对应网页

先把它变成一个合法得包

取名字

 

然后一路回车

然后安装框架 npm i express

创建serve.js写入代码并进行node serve

 

 创建静态资源文件  通过写入第四行进行静态资源得部署

 

 

 ​​​​​​​

所以同理

我们想让我们脚手架生成得文件在服务器中进行部署就直接把这些文件放入static文件中就行

 

 

 

 

然后如果路径变成这样了在点刷新就会对当前显示路径进行网络请求就会，因为这些路途是路由得跳转,而刷新就会进行网络请求,所以如果用history模式就会出现这样得问题

 而用hash模式得

 而且刷新得时候一点事也没有因为#后为hash值不会带给服务器

 而history好看我们上线也会去使用它,但需要一些步骤去解决现在的问题

下面我们就想用history然后解决它上线404的问题

所以要想解决history 404问题必须找后端工程师

使用一个node的中间件去解决history404问题

 

node.js里面：

1.进行中间件的引用

 

 

 2.去使用node中间件必须要写在静态资源的前面

 

 3.然后重启服务器

然后发现问题就解决了

总结：