vue配置history路由后刷新页面报错404问题

hello,大家好,这期我为大家带来一个关注点非常高,以及面试中基本上会问到的问题,为什么配置 history路由模式后,我们再次刷新页面,页面会返回 404 这个问题。

首先我们知道在实际项目开发中,路由模式分为 hashhistory模式两种,他两的区别我们都知道一个和在项目地址栏中带有 # 一个没带 #history下的路由看着更为简洁。但是我们设置了该模式下的路由后我们会发现一个问题,再次刷新页面后就会报错404 ,这是为什么呢?

其实主要是因为 游览器在我们输入路径并且回车按下的时候,会像服务器发送一次get请求,但是由于我们并未匹配到这个响应的请求路径,所以出现了报错的情况。

vue模块代码

js 复制代码
 <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请求,但是由于我们并未匹配到这个响应的请求路径,所以出现了报错的情况。

解决方案:

后端解决

js 复制代码
    /**
 *  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开发,也有相应的办法,原理大致相似。

好啦,这期的内容就更新到这里,觉得有用的朋友可以点赞并且关注一下,后面我会持续更新一些大家在项目中经常遇到的一些问题。

相关推荐
墨鱼鱼3 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
携欢7 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33015 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦15 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
qq_18417767723 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost25 分钟前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
C2X39 分钟前
Vue3.0 学习总结
前端
汤姆Tom41 分钟前
CSS 新特性与未来趋势
前端·css·面试
尘世中一位迷途小书童41 分钟前
🚀 pnpm + Monorepo 实战指南:现代前端项目管理的最佳实践
前端·架构
杨超越luckly1 小时前
HTML应用指南:利用GET请求获取全国中国建设银行网点位置信息
前端·arcgis·html·数据可视化·门店数据