vue项目history模式下部署子路由跳转失败的解决
更新时间：2022年03月31日 11:22:33 作者：Jerome^_^
这篇文章主要介绍了vue项目history模式下部署子路由跳转失败的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
history模式下子路由跳转失败
问题描述：只有部分路由跳转正常刷新也不会白屏，部分路由出现跳转正常，刷新却白屏。部分路由无法跳转。刷新报错如下图同时页面白屏
解决办法：
1、vue.config.js中publicPath设置为"/"而非"./"；
2、vue路由配置base:process.env.BASE_URL；
3、nginx下配置
location / {
alias /home/deepcare/server/dist/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}使用history跳转路由不能跳转
前端小白在学习react的时候，遇到了使用history跳转路由的问题，查了很多资料，最后找到了解决办法。
对登录页面的用户名和密码input值进行验证，验证成功后页面跳转到主页面，但是在使用this.props.history.replace()时，发现并不能正常跳转，而是出现了Paused in debugger，但是并没有详细提示出了什么错，跳转代码如下：
//对表单进行验证
this.props.form.validateFields(async(err, values) => {
if (!err) {
// 请求成功
const {user,password} = values
const result = await reqLogin(user,password)
if(result.data.code === 200){
message.success('登陆成功')
//跳转到后台管理界面(需要回退的话用push)
this.props.history.replace('/')
}else{
//提示错误信息
message.error(result.msg)
}
}
else{
console.log('校验失败');
}
});解决问题的办法
使用withRouter高阶组件
import React from "react";
import {withRouter} from "react-router-dom";
class MyComponent extends React.Component {
...
myFunction() {
this.props.history.push("/App/Home");
}
...
}
export default withRouter(MyComponent);以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue props对象validator自定义函数实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue3 v-bind="$attrs"继承组件全部属性的解决方案
这篇文章主要介绍了vue3 v-bind=“$attrs“ 继承组件全部属性的解决方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue的混合继承，有需要的朋友可以借鉴参考下，希望能够有所帮助，希望能够给你带来帮助2021-11-11
在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法，让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题2023-08-08
这篇文章主要给大家介绍了关于Vue中$root使用方法及注意事项的相关资料,vue中$root是用来访问根组件的,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
在Vue3中,我们经常会遇到需要处理列表渲染的情况,Vue3引入了一种新的语法,即#default=“scope”,本文就来介绍一下Vue3中#default=“scope”的使用,感兴趣的可以了解一下2023-10-10
这篇文章主要为大家介绍了Vitepress的文档渲染基础教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
详解vue-video-player使用心得（兼容m3u8）
这篇文章主要介绍了详解vue-video-player使用心得（兼容m3u8），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
本文介绍了如何利用Vue和Vant框架结合moment.js插件来实现一个7天日历展示功能,在这个功能中,用户可以在切换日期时看到界面的实时变化,此外,文章还提供了代码实现和效果测试的详细步骤,帮助开发者能够顺利完成类似的项目开发2024-10-10
最新评论