vue路由history模式页面刷新404解决方法Koa Express

目录
  • 为什页面刷新会出现404
  • Node服务使用Koa框架
  • Node服务使用Express框架

为什页面刷新会出现404

因为vue项目中路由hash模式改为了history模式，由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器，而history模式下当刷新页面之后浏览器会直接去请求服务器，而服务器没有这个路由，于是就出现404。

那为什么页面跳转就是正常的？跳转时其实不是通过请求服务器的，而是通过js操作history的API改变地址完成的。

建议：非C端系统可以考虑直接使用hash模式路由，就不会存在此问题了

Node服务使用Koa框架

使用koa-connect-history-api-fallback插件来解决

  • 安装依赖
npm install koa-connect-history-api-fallback --save
  • 使用方法（此演示是使用TypeScript的情况下，用JavaScript开发的忽略直接看下面修改后的代码）

在node项目中的 app.ts 文件中引入koa-connect-history-api-fallback

// 注意：该引用须在 `import koaStatic from 'koa-static';` 的前面
import history from 'koa-connect-history-api-fallback';
app.use(history());

此时会发现ts报错提示： 找不到模块“koa-connect-history-api-fallback”或其相应的类型声明。ts(2307)

可以通过install该插件对应的类型声明文件依赖@types/koa-connect-history-api-fallback来解决，但我尝试安装后发现npm服务器不存在该类型声明文件，因此咱们用commonJs规范的方式引入该插件即可（因为这种方式默认导入的是 any 类型）

修改后的代码如下:

const history = require('koa-connect-history-api-fallback');
app.use(history());

Node服务使用Express框架

使用connect-history-api-fallback插件来解决

  • 安装依赖
npm install connect-history-api-fallback --save
  • 使用方法
const history = require('connect-history-api-fallback');
app.use(history());

以上就是vue路由history模式页面刷新404解决方法Koa Express的详细内容，更多关于vue history模式页面刷新404的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 前端使用koa实现大文件分片上传

    前端使用koa实现大文件分片上传

    目录 引言 前端 拆分上传的文件流 后端 接收文件片段 合并文件片段 总结 引言 一个文件资源服务器,很多时候需要保存的不只是图片,文本之类的体积相对较小的文件,有时候,也会需要保存音视频之类的大文件.在上传这些大文件的时候,我们不可能一次性将这些文件数据全部发送,网络带宽很多时候不允许我们这么做,而且这样也极度浪费网络资源. 因此,对于这些大文件的上传,往往会考虑用到分片传输. 分片传输,顾名思义,也就是将文件拆分成若干个文件片段,然后一个片段一个片段的上传,服务器也一个片段一个片段的接收,最

  • 20行代码简单实现koa洋葱圈模型示例详解

    目录 引言 koa中间件的使用 洋葱圈模型 洋葱圈模型的实现,koa-compose 单次调用限制 koa-compose与流程引擎 总结 引言 koa想必很多人直接或间接的都用过,其源码不知道阅读本文的你有没有看过,相当精炼,本文想具体说说koa的中间件模型,一起看看koa-compose的源码,这也是koa系列的第一篇文章,后续会更新一下koa相关的其他知识点 koa中间件的使用 先让我们启动一个koa服务 // app.js const koa = require('koa'); cons

  • Node.js 网络框架koa compose中间件使用解析

    目录 前言 koa-compose 洋葱模型 源码解析 总结 前言 学习目标: koa-compose 洋葱模型 源码地址:koajs/compose koa-compose Koa-compose 是一个 Koa 中间件工具,Koa 是一个流行的 Node.js 网络框架.Koa-compose 允许你将多个中间件函数组合成一个单独的函数,这样可以更容易地管理和重用中间件. 在 Koa 中,中间件函数是按照特定顺序调用的函数,用于处理传入的 HTTP 请求并生成响应.中间件函数可以执行各种任务

  • 洋葱模型 koa-compose源码解析

    目录 洋葱模型 源码 动手 总结 洋葱模型 koa-compose是一个非常简单的函数,它接受一个中间件数组,返回一个函数,这个函数就是一个洋葱模型的核心. 源码地址:github.com/koajs/compo… 网上一搜一大把图,我就不贴图了,代码也不上,因为等会源码就是,这里只是介绍一下概念. 洋葱模型是一个非常简单的概念,它的核心是一个函数,这个函数接受一个函数数组,返回一个函数,这个函数就是洋葱模型的核心. 这个返回的函数就是聚合了所有中间件的函数,它的执行顺序是从外到内,从内到外.

  • koa TS ESLint搭建服务器重构版过程详解

    koa TS ESLint搭建服务器重构版过程详解

    目录 初始化项目目录 安装项目运行所需要的软件包 修改package.json 从.env中加载环境变量 配置路径别名 用法 目录规范 编码风格规范 Eslint 初始化项目目录 yarn init -y 安装项目运行所需要的软件包 生产依赖 yarn add koa koa-router cross-env module-alias dotenv koa:搭建 Koa 服务的核心软件包. koa-router:Koa 路由软件包. koa-bodyparser:解析 POST 请求参数的软件包

  • Nodejs中koa2连接mysql的实现示例

    Nodejs中koa2连接mysql的实现示例

    目录 将查询结果转为对象或者数组 mysql2的使用 Prepared Statement(预处理语句) Connection Pools(连接池) Promise方式 sequelize Sequelize的使用 Sequelize的单表操作 Sequelize的一对多操作 Sequelize的多对多操作 将查询结果转为对象或者数组 在真实开发中,实际上某些查询结果应该放入到一个对象中 JSON_OBJECT:()中是key-value的形式 SELECT products.id as id,

  • vue路由history模式页面刷新404解决方法Koa Express

    目录 为什页面刷新会出现404 Node服务使用Koa框架 Node服务使用Express框架 为什页面刷新会出现404 因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404. 那为什么页面跳转就是正常的?跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的. 建议:非C端系统可以

  • Vue路由传参页面刷新后参数丢失原因和解决办法

    目录 vue路由传参方法 原因分析: 解决方案: 总结 vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test  页面 就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数

  • 针对Vue路由history模式下Nginx后台配置操作

    前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ /index.html last; } 经测试,可以正常访问 补充知识:Vue History 模式下 整合Nginx部署踩坑过程 在公司部署Vue项目期间,因Vue的Rou

  • vue缓存的keepalive页面刷新数据的方法

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据 实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储:2. 用路由参数带过去:3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这

  • Vue路由history模式解决404问题的几种方法

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/c

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

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

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

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

  • vue下history模式刷新后404错误解决方法

    本文介绍了vue下history模式刷新后404错误解决方法,分享给大家,具体如下: 官方说明文档: https://router.vuejs.org/zh/guide/essentials/history-mode.html 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了官方给的五行配置 <VirtualHost *:80> #Created by linvic on 2018-05-24 Serveradmin 674

  • vue+webpack 打包文件 404 页面空白的解决方法

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行, 例如 :nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html 1 刷新页面404 配置启动文件的index页面的路径root: D:/workPlace

  • vue路由跳转后刷新指定页面的方法

    做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数.需要手动刷新之后,才会使用第二次参数. 鉴于时间原因直接使用刷新页面监听路由的方法.在准备跳转的A页面添加路由跳转监听事件,达到每次A页面跳转B页面时,B页面都会再次重新加载页面. 添加完成后,A页面跳转B页面,B页面成功刷新.正当我高兴的以为又解决了一个bug时,突然发现我从A页面跳转到C页面时,C页面竟然也在发生页面刷新现象.当时着实是将小主吓了一大跳.要知道正是因为要填写

随机推荐