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

时间: 2019-05-29

vue vue-Router默认hash模式修改为history需要做的修改详解

主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题,因为未登录用户在活动页面进行操作的时候会触发到登录事件,然后我们实现的方式是通过接口来判断,该接口标记的是一个upn的值 然后登录的时候是单点登录,不知道是否回调地址不支持vue形式下hash模式的路由,因而自动忽视了后面的#路径 然后我查了一下一般回调以后#后都会默认为书签,我转义了然而还是只能职别#之前的路径 由于不是很清楚登录单点那一块而且他们暂时实现没有什么业务问题(当然开始~~就是不稳定,现在有时候还是会有不稳定的问题)所

vue-router history模式下的微信分享小结

背景 旧项目改造,进行前后端分离.做成了spa,为了保证后端路由时期链接可用性,使用了history模式. 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑 微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushSt

Vue-router 中hash模式和history模式的区别

Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash";   mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向

vue-router中的hash和history两种模式的区别

众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has

vue-router的HTML5 History 模式设置

VUE是当下最火爆的前端框架之一,vue-router是vue项目中几乎都会用到的组件,然而体验一时爽,其实坑不少.本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题,并给出解决方案. vue-router的HTML5 History 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({ mode: 'history', routes: [...] }

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

解决vue router使用 history 模式刷新后404问题

因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

vue router下的html5 history在iis服务器上的设置方法

首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

vue 音乐App QQ音乐搜索列表最新接口跨域设置方法

在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./web

vue 打包后的文件部署到express服务器上的方法

vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

vue router带参数页面刷新或回退参数消失的解决方法

写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

IIS 服务器备份转移实现方法

原创文章:欢迎转载,转载时请保留作者名及出处 作者:jacksonluo 一:IIS的服务器前期配置(其他的安全就不提了) (以 freeshare.com.cn为例 ) 1.创建该域的(freeshare.com.cn)计算机用户名,并设置一个安全密码 2.创建该域的目录文件夹如(D:\Inetpub\freeshare.com.cn) 3.设置目录访问权限,freeshare.com.cn对该目录完全控制(提供匿名用户访问该网站) 4.创建一个该域名的描述(公司名) 的单独应用进程池,为每一

在IIS服务器上以CGI方式运行Python脚本的教程

由于接触到Python Web开发,正好把最简单的CGI方式研究了一下,话说在Windows下配置Python的Web开发还真的蛮麻烦的,Linux下配置倒挺容易,正好微软有技术文章<Using Python Scripts with IIS>介绍了这些内容,此文介绍了两种方法,一是使用ASP引擎来运行Python脚本,这个可能需要用到ActivePython,当然ASP技术已经过时了,我今天就简单介绍下CGI模块运行方式. 编写简单的支持CGI的Python脚本(本文介绍3.2版本的Pyth

详细图示关闭IIS的默认脚本映射,以提高服务器安全性的设置方法

首先打开IIS管理器,右键点击网站后,选择属性:弹出属性设置窗口如下,选择"主目录"下的"配置"按钮: 在新开的配置窗口中,我们可以看到各种后缀名,这些都是IIS可以执行的文件名称后缀,名称后面的栏目中说明了这种类型的文件,会由那个组件来解析执行它. 我们选种.CEX这个项目,点击删除按钮 在新弹出的对话框中选择是,则该类型的脚本映射被删除,IIS将不会再用asp.dll组件来解析.cdx后缀的文件了. 一般来说,使用动易系统的服务器,如果没有提供其他服务的需要,可

让IIS支持WAP的设置方法

配置IIS的MIME类型 打开IIS,网站的属性--HTTP头--MIME类型 注册MIME类型 扩展名 MIME类型 .wbmp image/vnd.wap.wbmp .wml text/vnd.wap.wml .wmlc application/vnd.wap.wmlc .wmls text/vnd.wap.wmlscript .wmlsc application/vnd.wap.wmlscriptc .wsc application/vnd.wap/wmlscriptc Wap网站测试方法

IIS里FTP多用户设置方法,终于不用Serv-U了

ntfs格式下: 1.建立一个用户隔离的FTP(删掉原来的,然后点右键新建,一路下去,有个用户隔离) 2.设置FTP根:比如 d:/FTP 3.加权限,如果用户没有这个目录的访问权限是不行的如:user1,user2 4.记住这里,多用户下,用户目录要放在FTP根目录的LocalUser目录下面,并以用户名为目录.如:ftp/LocalUser/user1 例名:若名用户进入的目录为:LocalUser/Public,当然这个Public要你自己建了. 这样的话,我们的网站目录 网站解析就是 d