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 相关文章推荐
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
信用卡效验程序
2006/10/09 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
js三种排序算法分享
2012/08/16 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python每天必学之bytes字节
2016/01/28 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
django foreignkey(外键)的实现
2019/07/29 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
flask 实现token机制的示例代码
2019/11/07 Python
python创建子类的方法分析
2019/11/28 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
python爬取youtube视频的示例代码
2021/03/03 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
12月小学生校园广播稿
2014/02/04 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
大学生英文求职信范文
2015/03/19 职场文书
小学中队活动总结
2015/05/11 职场文书
关于五一放假的通知
2015/08/18 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL