iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目history模式下部署子路由跳转失败的解决
  • 826
分享到

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

2024-04-02 19:04:59 826人浏览 安东尼
摘要

目录history模式下子路由跳转失败使用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;
    }

使用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);

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue项目history模式下部署子路由跳转失败的解决

本文链接: https://www.lsjlt.com/news/144591.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue项目history模式下部署子路由跳转失败的解决
    目录history模式下子路由跳转失败使用history跳转路由不能跳转history模式下子路由跳转失败 问题描述:只有部分路由跳转正常刷新也不会白屏,部分路由出现跳转正常,刷新却...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作