<强>写在前面
Vue-Router有两种模式,默认是散列模式,另外一种是历史上模式。
-
<李>哈希:也就是地址栏里的#符号。比如http://www.example//你好,散列的值为#/你好。特点:哈希虽然出现URL中,但不会被包含在HTTP请求中,对后端不会产生什么影响,改变URL不会重载页面。
<李>历史:利用了HTML5历史界面中新增的pushState()和replaceState()方法,来完成URL跳转而无须重新加载页面。(需要特定浏览器支持)
哈希和历史两种模式都是基于浏览器自身的属性,vue-router只是利用了这两个特性(底层还是浏览器提供的接口)来实现前端路由。
<强>使用场景
一般来说,两种模式都是可以的。除非在意不太漂亮的#,只能选择历史。
这两种模式在开发环境下都没有什么太大的问题,但是当部署到生产环境中后,两者有所不同。
哈希模式部署没有什么问题,只要访问到服务器上的索引。html,就可以访问网站了。
历史上模式下,前端URL的必须和实际向后端发起请求的URL一致,如http://www.example.com/user/id。如果后端缺少对/user/id的路由处理,将返回404错误。
不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何静态资源,则应该返回同一个索引。html页面,这个页面就是你应用依赖的页面。- Vue-Router
<强>问题起因
在做“年度账单”项目的时候,项目部署的时候,用的是散列模式.APP安卓端分享出去的链接对于#做了特殊处理,编码转义成了% 23,所以路由只能换成历史的模式。
因此,现把解决的思路总结下,虽然官网上给出了解决方案,但在实际的编码中也遇到了一些问题。
<强>根目录下
当项目在根目录下部署的时候(如http://www.example.com/), vue的相关文件默认不需要修改,修改的是后端,这里以nginx为例。
uri就美元是访问的url,不包含域名和变量的名称,例如/测试/你好当访问美元uri时,如果存在,则访问uri/美元,不存在就访问/索引。html这样配置好,访问http://example.com/时就可以访问到网站了,进入多级目录后刷新页面也不会存在问题。
<强>子级目录下
这里涉及到修改vue项目几个配置文件。
先定义几个环境
-
<李>部署的域名:http://www.example.com: 8080/李
<李> nginx的根目录:家庭/web/李
<李> vue的部署路径:家庭/web/h6-year-bill/李
<李> vue项目的链接:http://www.example/h6-year-bill/
<李> vue项目的静态资源路径:http://www.example/h6-year-bill/static/
<强> 1。打包后的静态资源路径需要修改
找到构建/config/index.js代码如下:
<强> 2。路由文件
Vue-Router有一个基地属性,传送门
基地
类型:字符串
默认值:“/?br/>
应用的基路径。例如,如果整个单页应用服务在/app/下,然后基本就应该设为“/app/?br/>
因此,找到src/路由器/index.js,代码如下:
至此,打包配置的相关修改已全部完成,项目也能够正常访问。
但还是会有一个问题,跳转到某个路由后,刷新页面,就会出现页面空白,或者路由不通,此时就要修改nginx的配置了。
<强> 3。nginx配置相关修改
nginx部署路径/conf/nginx.conf,修改如下:
