Vue Router history模式的配置方法及其原理


Posted in Javascript onMay 30, 2019

vue-router分为 hashhistory模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看。后者的url表现形式为 http://yoursite.com/home,比较美观。

但如果要使用 history模式,我们需要在后端进行额外配置。本文将讨论如何配置以及为什么要这样配置。

history模式的配置方法

我们来看看官方文档是教我们怎么配置的:HTML5 History 模式。

首先要将 mode设置为 history

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

然后设置后端(这里采用的nginx):

location / {
 try_files $uri $uri/ /index.html;
}

然后就......没了!显然官方的教程讲的比较简略,并且我们参照这个教程实际上还是会遇到一些问题。

history模式的配置实践及原理

强烈建议:阅读这部分之前,先看一下nginx的这部分文档和 这部分文档。

既然官方文档教我们这样做了,我们就按照它说的来实践一下。

只配置前端的情况

首先,我们将 mode设置为 history,但不配置后端。然后,假如我们的路由是长这个样子的:

const routes = [
  {path: '/home', component: Home},
  {path: '/', redirect: '/home'}
];

我们用nginx部署项目,然后在地址栏输入 http://localhost:8080(这里配置的端口是8080),你会发现地址栏之后会变为 http://localhost:8080/home,并且 看起来一切正常, 似乎路由也可以正常切换而不会发生其他问题(实际上会发生问题,后面会进行讨论)。看起来好像不需要按官网告诉我们的那样配置后端也能实现 history模式,但如果你直接在地址栏输入 http://localhost:8080/home,你会发现你获得了一个404页面。

那么 http://localhost:8080为什么可以(部分)正常显示呢?道理其实很简单,你访问 http://localhost:8080时,静态服务器(这里是nginx)会默认去目标目录(这里为 locationroot所指定的目录)下寻找 index.html(这是nginx在端口后没有额外路径时的默认行为),目标目录下有这个文件吗?有!然后静态服务器返回给你这个文件,配合 vue-router进行转发,自然可以(部分)正常显示。

但如果直接访问 http://localhost:8080/home,静态服务器会去目标目录下寻找 home文件,目标目录下有这个文件吗?没有!所以自然就404了。

配置后端

为了达到直接访问 http://localhost:8080/home也可以成功的目的,我们需要对后端(这里即nginx)进行一些配置。

首先想想,要怎样才能达到这个目的呢?

在传统的 hash模式中( http://localhost:8080#home),即使不需要配置,静态服务器始终会去寻找 index.html并返回给我们,然后 vue-router会获取 #后面的字符作为参数,对前端页面进行变换。

类比一下,在 history模式中,我们所想要的情况就是:输入 http://localhost:8080/home,但最终返回的也是 index.html,然后 vue-router会获取 home作为参数,对前端页面进行变换。那么在nginx中,谁能做到这件事呢?答案就是 try_files

首先看一下try_files的语法: try_files file ... uri;

然后看一下官方文档对它的介绍:

Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the file parameter according to the root and alias directives. It is possible to check directory's existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the uri specified in the last parameter is made.

大意就是它会按照 try_files后面的参数依次去匹配 root中对应的文件或文件夹。如果匹配到的是一个文件,那么将返回这个文件;如果匹配到的是一个文件夹,那么将返回这个文件夹中 index指令指定的文件。最后一个 uri参数将作为前面没有匹配到的fallback。(注意 try_files指令至少需要两个参数)

拿我自己的网站举个例子:

location / { 
    root      /data/www/rf-blog-web; 
    index      index.html; 
    try_files    $uri $uri/ /index.html; 
}

$uri是nginx中的变量,比如我访问的网址是 http://localhost:8080/home,那么它就代表的 /home

rf-blog-web这个目录中,没有子目录,只有一个 index.html和一些压缩后的名称是hash值的.js文件。当我们请求 http://localhost:8080/home这个地址时,首先查找有无 home这个文件,没有;再查找有无 home目录,也没有。所以最终会定位到第三个参数从而返回 index.html,按照这个规则,所有路由里的url路径最后都会定位到 index.htmlvue-router再获取参数进行前端页面的变换,至此,我们已经可以通过 http://localhost:8080/home这个地址进行成功地访问了。

$uri这个参数的作用其实是匹配那些.js文件用的,而 $uri/在这个例子中并没有多大用,实际上是可以去掉的。

history模式下可能会遇到的问题及解决方案

在将我的项目(在路由中用了懒加载)改为 history模式的过程中,有时候发现会出现chunk加载出错的情况,打开chrome的network发现那个chunk加载404了,是因为请求的url中多了一层路径。我在这里发现了解决方案。

LinusBorg说,因为在 history模式中切换路由时,我们是真正改变了页面的url路径,所以webpack的runtime会认为它位于 example.com/some/path。如果 publicPath是设置的相对路径,那么webpack加载chunk时可能会变成 example.com/some/path/static/js/3.js这样的路径,然而chunk的真正路径是 example.com/static/js/3.js,所以我们需要将 publicPath设置为绝对路径( publicPath: '/')来解决这个问题。

总结

以上所述是小编给大家介绍的Vue Router history模式的配置方法及其原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 #Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 #Javascript
了解JavaScript函数中的默认参数
May 30 #Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 #Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 #Javascript
细说Vue组件的服务器端渲染的过程
May 30 #Javascript
了解JavaScript中let语句
May 30 #Javascript
You might like
php 求质素(素数) 的实现代码
2011/04/12 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php中序列化与反序列化详解
2017/02/13 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
python实现周期方波信号频谱图
2018/07/21 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
eBay加拿大站:eBay.ca
2019/06/20 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
党支部培养考察意见
2015/06/02 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android