vue路由器设置历史模式

vue项目往往搭配vue-router的官方路由管理器，与vue.js的核心深度融合，很容易构建单页应用。Vue-router默认为hash模式，利用URL的hash来模拟一个完整的URL，因此当URL发生变化时，页面不会重新加载，而是根据hash来替换相应的组件并显示，称为单页应用。

但是在使用默认的哈希模式时，浏览器的URL地址中会有一个#号，与之前的网址不同，可能会让大多数人不习惯，甚至觉得很难看。

去掉地址中的#并不难，只需改变vue-router另一种模式的历史模式即可。

历史模式

当您使用历史模式时，URL会变回一个正常而漂亮的地址，就像大多数网站地址一样，例如http://zhengchang.com/name/id

但是这种模式存在漏洞，不仅需要前端开发人员将模式改为历史模式，还需要后端进行相应的配置。如果后端没有正确配置，当你访问你的项目地址时，会出现404，这就更难看了。

官方给出了几个常见的后端配置示例：

街头流氓

服务器

原生节点

互联网信息服务

因为我的项目后端服务是IIS，所以我会重点分享IIS的相关配置。

IIS后端配置

首先前端将vue-router模式改为历史模式，开发完成打包后，将文件部署到站点。网站的根目录中会有一些相关的配置文件，这些后端人员会清楚的知道，前端开发只需要告诉后端人员如何编写配置文件，而不需要#。

在网站的根目录下创建一个web.config文件，如上图所示。起关键作用的是重写标签中的代码：

规则标签:它代表一个已定义的规则。匹配标签:你的规则要求是什么？url属性的内容是要求(正则表达式)。动作标签:类型属性为Rewrite，url属性为目标。含义：如果满足匹配标签中url属性的规律性，则执行该配置(将满足匹配标签url要求的地址重写为动作标签中url属性的地址)。这种配置就像重定向一样，它将满足您要求的地址重定向到您想要的地址。以下是我的项目中IIS的配置：

我的要求是，除“api”或“token”之外的所有地址都被重定向到“/”。因为我的接口地址以api和token开头，所以接口地址不能更改。

Api接口

令牌接口

然后，服务器将index.html设置在默认显示目录中，这个index.html文件是前端打包后生成的html文件。当网站打开html文件并执行相应的脚本时，相应的组件内容将根据您的路由设置显示，浏览器地址中的#将被替换。

还有一个配置我的图片路径的规则标签。

在开发环境中，图片会根据对应的组件分类到不同的文件夹中，例如home组件中的横幅图，路径为“assets/home/banner.png”。

我的项目打包后，生成了index.html和静态文件夹，js、css、img等文件夹都是静态的。所有图片均放置在“/static/img/”下，图片路径将自动更改为”。/static/img/"。

我不希望图片路径重定向到“/”，所以规则是：重定向“/static/img/name.png”到“/static/img/name.png”。

静态图片路径

配置中最难的大概就是正则表达式了。根据不同的需求配置不同的正则表达式，拿到正则就搞定了！

摘要

以上是边肖介绍的从vue项目地址中删除#的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！