Vue3中使用History模式引发刷新页面出现404的问题

这篇具有很好参考价值的文章主要介绍了Vue3中使用History模式引发刷新页面出现404的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在vue3中的路由中,路由间的跳转是不刷新浏览器的,也就是用ajax来请求后端接口对组件进行增量更新,hash模式中#后面的路径都不会直接发送给后端,都是前端自己在玩,但是路径中有'#'不利于seo优化而且也不美观,一旦在history模式下刷新浏览器,就会相当于直接请求后端中对应uri的controller,这时大概率是请求不到任何数据的,从而报404错误.

我就想用history模式,应该如何解决此问题呢

在vue-router4的官方文档中提到了此问题https://router.vuejs.org/zh/guide/essentials/history-mode.html,以如下方式创建一个h5中history模式的路由,这时我们只需要配置,一切刷新浏览器的行为如果匹配不到内容,全部重定向到首页index.html上,如果 URL 不匹配任何静态资源,它应提供与你的应用程序中的 index.html 相同的页面.

这是你的路由,它位于src/router/index

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

如果你使用的是nginx,可以在nginx的config配置文件中添加如下配置

location / {
  //root   如果你配置了此选项,try_files时就会拼接上root对应的地址
  index index.html    //如果你的代码严格遵循文件夹下的默认文件是index.html,此选项可不写
  try_files $uri $uri/ /index.html;
}

解释一下,index选项是用于配置路径下默认的文件名称,try_files是依次检查能否匹配得上对应的文件,一旦匹配上就返回,后面的就不看了,如果均没有匹配上,就会返回最后一个文件

比如我的地址栏中的地址是: http://localhost:3004/api/home/user/name

那么$uri就是/api/home/user/name,所以try_files会依次检查后端的接口能否匹配得上/api/home/user/name, /api/home/user/name/index.html,如果都匹配不到,则重定向到

http://localhost:3004/index.html

一个注意的问题:

既然所有找不到路由的请求都返回index.html,那真正404的请求就不会显示404了。

要在src/router/index.js的 routes:[]的末尾添加如下配置:文章来源地址https://www.toymoban.com/news/detail-585095.html

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...此处是你自己配置的路由

    {
      path: '*',            //其他路由显示404
      component: NotFound,    //你的404组件
    }

  ],
})

到了这里,关于Vue3中使用History模式引发刷新页面出现404的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目history模式刷新404问题

    vue项目history模式部署到服务器后 ,根路径访问没有问题,但是进入其他功能再刷新页面就会出现404,因为你没在nginx或者apache配置上面加上重定向跳转。 解决办法,只需要加上这段配置: nginx配置内容: apache配置内容: 这句配置的意思是每次匹配url路径时候找不到对应静态

    2024年02月11日
    浏览(47)
  • vue3如何切换hash/history两种路由模式

    本文介绍了在vue3中,如何使用history和hash两种路由模式的方法 1、history模式 使用createWebHistory 2、hash模式 使用createWebHashHistory 综上所述: history 对应 createWebHistory hash 对应 createWebHashHistory

    2024年02月13日
    浏览(41)
  • vue3 history模式配置及nginx服务器配置

    vue的路由方式有hash模式和history模式,history模式路由看起来有好些,路由路径里没有#号,而hash模式默认是有#号的。 vue3开始默认新建的项目都是history模式,不过history模式打包后想要使用正常访问的话,需要后端服务器进行配置才可以,否则可能会出现刷新后404的问题。一般

    2024年02月05日
    浏览(45)
  • nginx 部署vue项目,页面白屏或者页面刷新出现404问题

    将vue项目打包部署到nginx上面运行 问题一: 运行时页面白屏。 问题二: 页面可以正常显示,当刷新页面的时候页面报404 错误。 页面白屏分析: 我们可以先查看一下nginx下的 logs/error.log 日志文件,确定我的问题是因为项目打包时候路劲配置问题。 页面404分析 :我们在将

    2024年02月15日
    浏览(42)
  • vue/react项目刷新页面出现404的原因以及解决办法

    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。 产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个 index.html 文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,

    2024年02月06日
    浏览(50)
  • vue3 关于动态路由刷新出现空白页最优解

    原因:刷新页面的时候动态路由会刷新掉,然后动态路由会重新加载, 而匹配路由会在加载路由之前 ,所以会导致空白页 解决办法:递归再调用beforEach,或者直接跳回首页 在你加载路由的地方 递归调用:next({ …to, replace: true });(慎用,如果你的后台管理table是带标签会有

    2024年02月15日
    浏览(53)
  • vue3 动态添加路由刷新后页面丢失(白屏)问题

    动态添加路由操作一般是用vuex或者Pinia封装,在登录页面调用 如果出现刷新页面丢失有两种可能: 1:vuex或者Pinia没有做持久化处理 2:动态添加路由需要在main.ts里面也调用一次 不需要路由守卫即可实现 注意:必须要在页面挂载前还有路由配置完成前调用添加,不然还是丢

    2024年02月16日
    浏览(56)
  • Vue/React 项目部署到服务器后,刷新页面出现404报错

    问题描述:在本地启动项目一切正常, 部署到服务器上线后出现BUG,项目刷新页面出现404 。 起初以为是自己路由守卫或是token丢失问题,找了一圈终于解决了 产生原因: 我们打开vue/react打包后生成的dist文件夹,可以看到只有一个 index.html 文件及一些静态资源,这个是因为

    2024年02月07日
    浏览(46)
  • vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法

    做项目时遇到的这个bug,因为除了跳404之外也没太大影响,之前就一直放着没管,现在项目基本功能实现了,转头处理了一下,现在在这里记录一下解决方法 这个bug的具体情况是:设置了动态路由之后,不同的用户登录之后显示了不同的侧边栏,在侧边栏点击菜单,渲染对应

    2024年04月28日
    浏览(60)
  • 解决vue3项目跳转同一页面数据不刷新的问题

            原因:router-view使用了keep-alive组件,会被缓存,而vue-router的切换不用于传统的页面切换。是路由之间的切换,组件之间的切换,引用相同组件的时候,会被直接调用缓存里面的而不会调用created(),onMoun ted()函数。         如图所示:要实现的功能是点击每一个

    2024年02月11日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包