首先我们知道在实际项目开拓中，路由模式分为 hash 和 history模式两种，他两的差异我们都知道一个和在项目地址栏中带有 # 一个没带 #，history下的路由看着更为简洁。但是我们设置了该模式下的路由后我们会创造一个问题，再次刷新页面后就会报错404 ，这是为什么呢？
实在紧张是由于 游览器在我们输入路径并且回车按下的时候，会像做事器发送一次get要求，但是由于我们并未匹配到这个相应的要求路径，以是涌现了报错的情形。
vue模块代码
<template> <div> 超屌~ askjdhasjk </div></template><script>export default { name: 'MenuJaychou', data() { return { }; }, mounted() { }, created(){ this.init() }, methods: { init(){ this.$axios.get(`${this.$apiurls.first}`).then((res)=>{ console.log(res); }).catch((err)=>{ console.log(err); }) } },};</script>
我这边是将axios进行了封装后，然后自己用 node.js托管了我目前的这个项目。
我们可以看到目前项目是托管成功了并且首次是正常访问
返回值也是我事先设置好的返回值
现在我们刷新一次页面：
我们创造他就会根据你所在的路径发送一次 get要求，把稳 这个get要求不会被做事端捕获到，可以理解为，后端是收不到你这次要求的。由于在他的做事器中压根就设置这条接口。导致这个缘故原由刚刚我也说过，是由于 游览器在我们输入路径并且回车按下的时候，会像做事器发送一次get要求，但是由于我们并未匹配到这个相应的要求路径，以是涌现了报错的情形。
办理方案：
后端办理
/ 1、 下载一个包 npm i connect-history-api-fallback' 2、 引入包 3、 挂载这个包的中间件 / const express = require("express");// 引入下好的包const history = require('connect-history-api-fallback')// 挂载这个包的中间件 app.use(history())const app = express()// 将 打包好的 dist 文件 进行项目托管app.use(express.static(__dirname + '/dist'))app.get('/login',(req,res)=>{ res.send('我便是 login 接口')})app.listen(3000,()=>{ console.log('做事已经启动~');})
这样子过后就没啥问题了，缘故原由是由于这样的配置做完之后，让所有的路由都指向同一个入口文件（比如 index.html），由前端路由来处理 URL 要求，返回对应的页面内容。
实在我这讲这个东西紧张是为了见告大家，造成这个问题的紧张缘故原由是什么，并且如何办理，当然想深挖的朋友可以连续深入理解他们内部事理，碰着这个问题不要慌，跟做事端沟通就行了。我用的是nodejs现在大多数用的是java开拓，也有相应的办法，事理大致相似。
好啦，这期的内容就更新到这里，以为有用的朋友可以点赞并且关注一下，后面我会持续更新一些大家在项目中常常碰着的一些问题。
