目录history模式下子路由跳转失败使用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;
}
前端小白在学习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);
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue项目history模式下部署子路由跳转失败的解决
本文链接: https://www.lsjlt.com/news/144591.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0