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

Richard_Gao 发布于2019-08-30 11:04 / 835人阅读

摘要：但如果要使用模式，我们需要在后端进行额外配置。模式的配置方法我们来看看官方文档是教我们怎么配置的模式。模式的配置实践及原理强烈建议阅读这部分之前，先看一下的这部分文档和这部分文档。只配置前端的情况首先，我们将设置为，但不配置后端。

始发于我的博客 ryougifujino.com，欢迎访问留言。

vue-router分为hash和history模式，前者为其默认模式，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）会默认去目标目录（这里为location中root所指定的目录）下寻找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.html。vue-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: "/"）来解决这个问题。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114756.html

vue-router实现原理

摘要：我们知道是的核心插件，而当前项目一般都是单页面应用，也就是说是应用在单页面应用中的。原理是传统的页面应用，是用一些超链接来实现页面切换和跳转的其实刚才单页面应用跳转原理即实现原理实现原理原理核心就是更新视图但不重新请求页面。近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录下。我们知道vue-router是vue的核心插件，而当前vue项目...

vibiu 2019-08-23 16:09 评论0 收藏0
简述vue-router实现原理

摘要：源码解读阅读请关注下代码注释打个广告哪位大佬教我下怎么排版啊，不会弄菜单二级导航扑通是什么首先，你会从源码里面引入，然后再传入参数实例化一个路由对象源码基础类源码不选择模式会默认使用模式非浏览器环境默认环境根据参数选择三种模式的一种根据版 router源码解读阅读请关注下代码注释打个广告：哪位大佬教我下sf怎么排版啊，不会弄菜单二级导航（扑通.gif） showImg(https:...

Cristalven 2019-08-23 15:21 评论0 收藏0
简述vue-router实现原理

摘要：源码解读阅读请关注下代码注释打个广告哪位大佬教我下怎么排版啊，不会弄菜单二级导航扑通是什么首先，你会从源码里面引入，然后再传入参数实例化一个路由对象源码基础类源码不选择模式会默认使用模式非浏览器环境默认环境根据参数选择三种模式的一种根据版 router源码解读阅读请关注下代码注释打个广告：哪位大佬教我下sf怎么排版啊，不会弄菜单二级导航（扑通.gif） showImg(https:...

Ajian 2019-08-02 14:17 评论0 收藏0
简述vue-router实现原理

摘要：源码解读阅读请关注下代码注释打个广告哪位大佬教我下怎么排版啊，不会弄菜单二级导航扑通是什么首先，你会从源码里面引入，然后再传入参数实例化一个路由对象源码基础类源码不选择模式会默认使用模式非浏览器环境默认环境根据参数选择三种模式的一种根据版 router源码解读阅读请关注下代码注释打个广告：哪位大佬教我下sf怎么排版啊，不会弄菜单二级导航（扑通.gif） showImg(https:...

gekylin 2019-08-05 18:10 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0