vue項(xiàng)目history模式下部署子路由跳轉(zhuǎn)失敗的解決
history模式下子路由跳轉(zhuǎn)失敗
問(wèn)題描述：只有部分路由跳轉(zhuǎn)正常刷新也不會(huì)白屏，部分路由出現(xiàn)跳轉(zhuǎn)正常，刷新卻白屏。部分路由無(wú)法跳轉(zhuǎn)。刷新報(bào)錯(cuò)如下圖同時(shí)頁(yè)面白屏
解決辦法：
1、vue.config.js中publicPath設(shè)置為"/"而非"./"；
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跳轉(zhuǎn)路由不能跳轉(zhuǎn)
前端小白在學(xué)習(xí)react的時(shí)候，遇到了使用history跳轉(zhuǎn)路由的問(wèn)題，查了很多資料，最后找到了解決辦法。
對(duì)登錄頁(yè)面的用戶(hù)名和密碼input值進(jìn)行驗(yàn)證，驗(yàn)證成功后頁(yè)面跳轉(zhuǎn)到主頁(yè)面，但是在使用this.props.history.replace()時(shí)，發(fā)現(xiàn)并不能正常跳轉(zhuǎn)，而是出現(xiàn)了Paused in debugger，但是并沒(méi)有詳細(xì)提示出了什么錯(cuò)，跳轉(zhuǎn)代碼如下：
? ? //對(duì)表單進(jìn)行驗(yàn)證
? ? this.props.form.validateFields(async(err, values) => {
? ? ? ? if (!err) {
? ? ? ? ? ? // 請(qǐng)求成功 ?
? ? ? ? ? ? const {user,password} = values
? ? ? ? ? ? const result = await reqLogin(user,password)
? ? ? ? ? ? if(result.data.code === 200){
? ? ? ? ? ? ? ? message.success('登陸成功')
? ? ? ? ? ? ? ? //跳轉(zhuǎn)到后臺(tái)管理界面(需要回退的話(huà)用push)
? ? ? ? ? ? ? ? this.props.history.replace('/')
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? //提示錯(cuò)誤信息
? ? ? ? ? ? ? ? message.error(result.msg)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? console.log('校驗(yàn)失敗');
? ? ? ? }
? ? ? });解決問(wèn)題的辦法
使用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);以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue模塊拖拽實(shí)現(xiàn)示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章給大家介紹了基于Vue的移動(dòng)端圖片裁剪組件功能，因?yàn)橐苿?dòng)端是用vue，所以就寫(xiě)成了一個(gè)vue組件，下面就說(shuō)說(shuō)自己的一些實(shí)現(xiàn)思路,需要的朋友可以參考下2017-11-11
vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建，本文給大家分享實(shí)例代碼，需要的朋友可以參考下2019-12-12
vue導(dǎo)入新工程?“node_modules依賴(lài)”問(wèn)題
這篇文章主要介紹了vue導(dǎo)入新工程?“node_modules依賴(lài)”問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue系列：通過(guò)vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列：通過(guò)vue-router如何傳遞參數(shù)示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
最近在學(xué)習(xí)vue,感覺(jué)路由守衛(wèi)這個(gè)地方知識(shí)點(diǎn)挺多的,而且很重要,下面這篇文章主要給大家介紹了關(guān)于vue3中7種路由守衛(wèi)的使用大全,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue3中實(shí)現(xiàn)音頻播放器APlayer的方法
這篇文章主要介紹了vue3中實(shí)現(xiàn)音頻播放器APlayer的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式
這篇文章主要介紹了Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue 組件中添加樣式不生效的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了Vue性能優(yōu)化的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-07-07