首页 > 其他 > 详细

Vue路由之Hash模式和history模式的区别及History模式的解决办法

时间:2021-07-03 22:29:59      阅读:18      评论:0      收藏:0      [点我收藏+]

一.表现形式的区别

技术分享图片

二.原理的区别

技术分享图片

三.History模式下出现的问题及解决办法

History需要服务器的支持刷新页面之后浏览器会发送请求,单页面应用中,服务端不存在像http://www.testurl.com/login这样的地址,当刷新页面会返回找不

到该页面,因为单页面应用中只有index.html,所有在服务端应该除了静态资源外都返回单页应用的index.html,下面简介下node服务和nginx服务下部署处理

history模式的解决办法.

1.History模式-Node.js

app.js为基于express搭建的web服务器,路径为根目录下的web目录下(web目录为本人起的名字)打包好的文件具体操作步骤如下:

 

1.要保证电脑上安装Node及npm,

2.安装express npm install express --save

3.安装connect-history-api-fallback

4.安装完成后在终端运行node app.js 就可解决history路由问题

5.打开浏览器输入localhost:3000(备注:我这块设置端口号为3000)

 

app.js具体代码如下:

技术分享图片

2.History模式-Nginx

具体操作步骤如下:

 

1.从官网下载nginx,下载完成后,解压到c盘根目录下,目录不能有汉字

2.解压完成后把打包好的文件,复制根目录下html目录中.

3.修改conf目录下nginx.conf文件,修改内容如下图:

4.修改完成之后,在下载的nginx目录下打开终端执行start nginx.exe命令

5.打开浏览器 输入localhost:9000(备注:我这块nginx.config默认端口号是9000)

技术分享图片

 

Vue路由之Hash模式和history模式的区别及History模式的解决办法

原文:https://www.cnblogs.com/websiteblogs/p/14967473.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!