交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • Vue Router history模式的配置方法及其原理

    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模式的配置方法及其原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!

    您可能感兴趣的文章:

    • vue vue-Router默认hash模式修改为history需要做的修改详解
    • vue-router的HTML5 History 模式设置
    • Vue-router 中hash模式和history模式的区别
    • vue-router中的hash和history两种模式的区别
    • vue-router history模式下的微信分享小结
    • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
    • vue router下的html5 history在iis服务器上的设置方法
    • 解决vue router使用 history 模式刷新后404问题

    广而告之:
    热门推荐:
    JavaScript格式化数字的函数代码

    复制代码 代码如下:/** * 格式化数字 * Author : Z,Mingyu * 参数: * prmNum (Number) : 要格式化的数字 * prmPtn (String) : 格式化规则,例如:#,##0.00 * * prmNullValue : 当要格式化的数字为null、空或非数字时,返回的结果。默认为0 */ function formatNum(prmNum···

    vue2.0 中使用transition实现动画效果使用心得

    实践 这里将通过四个实践小案例来体验和学习css过渡,css动画,javascript钩子,列表过渡的应用。至于案例用到的知识点就请自行学习官网文档。 1.css过渡–实践 先来看看demo效果: 这个案例其实很简单,通过一个transition来触发多个子元素的过渡效果,我们只需要定义元素对应···

    快速开发一个PHP扩展图文教程

    需求:比如开发一个叫做 heiyeluren 的扩展,扩展里就一个函数 heiyeluren_test(),输入一个字符串,函数返回:Your input string: xxxxx。 要求:了解C/C++编程,熟悉PHP编程 环境:下载一份php对应版本的源码,我这里是 php-5.2.6,先正常安装php,假设我们的php安装在···

    jQuery学习7 操作JavaScript对象和集合的函数

    删除字符串首尾空字符:$.trim() 像很多高级语言都提供了类似的函数,jQuery类库也提供了这样的函数。具体用法:$.trim(value)从已传入的字符串里删除首尾空白字符并返回结果。 对属性和集合进行迭代: 在JavaScript操作数组和对象可以采用下面的方法: var anArray = ['···

    微信小程序 出现47001 data format error原因解决办法

    微信小程序 出现47001 data format error原因解决办法 看下错误: 主要原因是请求的数据不是json格式引起的 分享下我用的代码和函数:  发送模板消息 public function sendmessage(){ $data=$_POST=json_decode(file_get_contents('php://input'), TRUE); $access_t···

    mysql求和函数使用示例

    复制代码 代码如下: $sql="SELECT SUM(prise) sum from buylist where mid = '1'"; $ress=mysql_query($sql); echo $rowxiaofei=mysql_fetch_assoc($ress);

    学习php设计模式 php实现享元模式(flyweight)

    一、意图 运用共享技术有效的支持大量细粒度的对象 享元模式变化的是对象的存储开销 二、享元模式结构图 三、享元模式中主要角色 抽象享元(Flyweight)角色:此角色是所有的具体享元类的超类,为这些类规定出需要实现的公共接口。那些需要外蕴状态的操作可以通过调用商业以参数···

    js实现动态添加上传文件页面

    发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项。 此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选择文件行消失,当所有选择文件项都消失时,上传按钮将被隐藏···

    将文本文件的内容或者文字保存成图片的方法分享

    调用方法:复制代码 代码如下:ConvertTextFileToImage(Server.MapPath("~/Log.txt"),Server.MapPath("~/Log.png")); 实现代码:复制代码 代码如下:void ConvertTextFileToImage(String textFile,String imageFile){System.Drawing.Font drawFont = new System.Drawing.Fo···

    自制PHP框架之模型与数据库

    什么是模型? 我们的WEB系统一定会和各种数据打交道,实际开发过程中,往往一个类对应了关系数据库的一张或多张数据表,这里就会出现两个问题。 1.类和数据表,一方修改会导致另一方的修改,只要数据表结构不定下来,业务逻辑的开发几乎没法开工 2.获取数据时会牵涉很多SQL语句···