vue项目history模式下部署子路由跳转失败的解决 vue项目history模式下部署子路由

history模式下子路由跳转失败
使用history跳转路由不能跳转

history模式下子路由跳转失败问题描述：只有部分路由跳转正常刷新也不会白屏，部分路由出现跳转正常，刷新却白屏。部分路由无法跳转。刷新报错如下图同时页面白屏

文章图片

解决办法：
1、vue.config.js中publicPath设置为"/"而非"./"；
2、vue路由配置base:process.env.BASE_URL；
3、nginx下配置

location / {alias /home/deepcare/server/dist/; indexindex.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} = valuesconst 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项目history模式下部署子路由跳转失败的解决】以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。