博客地址:https://ainyi.com/69

三月来了,春天还会远吗、、

在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~

映照官方说法

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

export default new Router({
mode: 'history',
routes: [...]
)}

当使用 history 模式时,URL 就像正常的 url,例如 https://ainyi.com/about,好看又优雅!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 https://ainyi.com/about 就会返回 404,因为后端没有 /about 相应的拦截器,自然 404

所以,要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是 app 依赖的页面

后端实现

本博客后端使用的是 java 的 ssm 框架,原本只做了后端接口,只提供接口

对于诸如 /about 的 url,SpringMVC 的 @RequestMapping() 没有做映射,自然是报 404 错误的

考虑到除了接口,其他访问的 history 全都是返回 404 页面,想到一个方法,就是直接做 404 页面的跳转转发,这就解决了 history 路由的问题

就是在 web.xml 中进行 404 页面的配置跳转,在 web-app 标签中配置 error-page

<web-app>
...
<!-- 未匹配到 url 的跳转页面,用于 vue history 路由,未匹配的路径自动转发到 index.html -->
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>

完美,

但又有一个问题出现了,点击跳转可以进入二级路由,例如进入了 https://ainyi.com/tag/vue

当点击刷新的时候,会报一个找不到资源的错误,也就是 js 静态资源没找到 qaq

这就要前端来解决这个问题

刷新找不到资源

由于之前是使用 hash 路由,npm run build 打包之后,直接打开 index.html 会报找不到资源的情况,这我在之前写的博客记录解决方案:https://ainyi.com/47

当时是这么做的:

文件路径出错解决:在 config 的 index.js 下 build 的设置:assetsPublicPath: ‘./’,

而如今变成 history 路由,此字段应设置成 assetsPublicPath: ‘/’

原因如下:

'./' 是指用户所在的当前目录(相对路径)
'/' 是指根目录,也就是项目的根目录
对于 hash 模式,根路径是固定的,就是项目的根目录
但是 history 模式下,以 / 开头的嵌套路径会被当作根路径
所以当使用 './' 引入文件,就会找不到文件了
因为文件本身就是在项目根目录下的,并不在嵌套 history 的路径目录下

设置好之后,重新打包,测试,部署上线,完美解决~

提醒

后端做了 404 页面自动跳转到 index.html 之后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件

为了避免这种情况,应该在 vue-router 里面设置无法匹配正确路由的情况跳转到前端的 404 页面

export default new Router({
mode: 'history',
routes: [
// TODO
{
path: '*',
component: () => import('../components/NotFound'),
name: 'NotFound',
meta: {title: '404 - 找不到页面'},
}
]
)}

博客地址:https://ainyi.com/69

告别 hash 路由,迎接 history 路由的更多相关文章

  1. 前端路由的两种模式: hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  2. 【前端路由】Vue-router 中hash模式和history模式的区别

    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...

  3. 前端路由的两种模式:hash(#)模式和history模式(转)

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  4. 前端路由原理之 hash 模式和 history 模式

    什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...

  5. hash和history路由的区别

    在了解路由模式前,我们先看下 什么是单页面应用,vue-router  的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...

  6. Router和History (路由控制)-backbone

    Router和History (路由控制) Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文 ...

  7. 如何去除vue项目中的 # — vue路由的History模式

    前言 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头. 添加 mode: 'history' 之后将使用 HTML5 his ...

  8. history路由模式下的nginx配置

    路由模式 众所周知,浏览器下的单页面应用的路由模式有下面两种: hash 模式和 history 模式.hash 模式通用性好,而且不依赖服务器的配置,省心省力,但是缺点是不够优雅.相比于 hash ...

  9. 单页面应用的History路由模式express后端中间件配合

    这篇文章主要分享一下通过HTML5的history API的时候,使用NodeJS后端应该如何配置,来避免产生404的问题,这里是使用的express的框架,主要是通过connect-history- ...

随机推荐

  1. xshell 快速复制打开之前用过的ssh

    有时候需要对一个ip地址的服务器进行多个操作,不在一个会话中,需要新建多个同样的会话 然后左键单击+号 出现一个新的会话 然后再右键单击+号 选择之前保存过的ip地址即可快速创建!

  2. 毕业样本=[威尔士大学毕业证书]UWIC原件一模一样证书

    威尔士大学毕业证[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&am ...

  3. matplotlib解决中文乱码

    调试以前写的matplotlib相关脚本,中文呈方块样:重新解决一遍,感觉比以前的理解更进一步,故而记下一笔: 1. 首先要为matplotlib添加中文字体库: 系统字体库在/usr/share/f ...

  4. Ubuntu配置tomcat9

    buntu 安装jdk:[链接] Ubuntu安装eclipse:[链接] Ubuntu下安装MySQL与mysql workbench:[链接] Ubuntu配置tomcat9:[链接] Ubunt ...

  5. 挑子学习笔记:DBSCAN算法的python实现

    转载请标明出处:https://www.cnblogs.com/tiaozistudy/p/dbscan_algorithm.html DBSCAN(Density-Based Spatial Clu ...

  6. 一文学会Scala

    整体介绍 Scala 是一门多范式(multi-paradigm)的编程语言,设计初衷是要集成面向对象编程和函数式编程的各种特性. 联邦理工学院洛桑(EPFL)的Martin Odersky于2001 ...

  7. 腾讯云存储专家深度解读基于Ceph对象存储的混合云机制

    背景 毫无疑问,乘着云计算发展的东风,Ceph已经是当今最火热的软件定义存储开源项目.如下图所示,它在同一底层平台之上可以对外提供三种存储接口,分别是文件存储.对象存储以及块存储,本文主要关注的是对象 ...

  8. MySQL 复制 - 性能与扩展性的基石 2:部署及其配置

    正所谓理论造航母,现实小帆船.单有理论,不动手实践,学到的知识犹如空中楼阁.接下来,我们一起来看下如何一步步进行 MySQL Replication 的配置. 为 MySQL 服务器配置复制非常简单. ...

  9. xamarin forms常用的布局StackLayout详解

    通过这篇文章你将了解到xamarin forms中最简单常用的布局StackLayout.至于其他几种布局使用起来,效果相对较差,目前在项目中使用最多的也就是这两种布局StackLayout和Grid ...

  10. 强化学习(十七) 基于模型的强化学习与Dyna算法框架

    在前面我们讨论了基于价值的强化学习(Value Based RL)和基于策略的强化学习模型(Policy Based RL),本篇我们讨论最后一种强化学习流派,基于模型的强化学习(Model Base ...