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模块拖拽实现示例代码

    vue模块拖拽实现示例代码

    这篇文章主要介绍了vue模块拖拽实现示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 基于Vue的移动端图片裁剪组件功能

    基于Vue的移动端图片裁剪组件功能

    这篇文章给大家介绍了基于Vue的移动端图片裁剪组件功能,因为移动端是用vue,所以就写成了一个vue组件,下面就说说自己的一些实现思路,需要的朋友可以参考下
    2017-11-11
  • vue 实现websocket发送消息并实时接收消息

    vue 实现websocket发送消息并实时接收消息

    这篇文章主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建,本文给大家分享实例代码,需要的朋友可以参考下
    2019-12-12
  • vue导入新工程 “node_modules依赖”问题

    vue导入新工程 “node_modules依赖”问题

    这篇文章主要介绍了vue导入新工程 “node_modules依赖”问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue系列:通过vue-router如何传递参数示例

    Vue系列:通过vue-router如何传递参数示例

    本篇文章主要介绍了Vue系列:通过vue-router如何传递参数示例,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • vue3中7种路由守卫的使用大全举例

    vue3中7种路由守卫的使用大全举例

    最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,下面这篇文章主要给大家介绍了关于vue3中7种路由守卫的使用大全,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue3中实现音频播放器APlayer的方法

    vue3中实现音频播放器APlayer的方法

    这篇文章主要介绍了vue3中实现音频播放器APlayer的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue.js中使用${}实现变量和字符串的拼接方式

    Vue.js中使用${}实现变量和字符串的拼接方式

    这篇文章主要介绍了Vue.js中使用${}实现变量和字符串的拼接方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue 组件中添加样式不生效的解决方法

    vue 组件中添加样式不生效的解决方法

    这篇文章主要介绍了vue 组件中添加样式不生效的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue性能优化的方法

    Vue性能优化的方法

    这篇文章主要介绍了Vue性能优化的方法,文中讲解非常细致,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-07-07

最新评论