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 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHP文件操作实例总结
2016/09/27 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
js比较日期大小的方法
2015/05/12 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
vuex 的简单使用
2018/03/22 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
django的ORM模型的实现原理
2019/03/04 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
python两种注释用法的示例
2020/10/09 Python
基于Python实现天天酷跑功能
2021/01/06 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
运动会开幕式主持词
2014/03/28 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书