vue項(xiàng)目history模式下部署子路由跳轉(zhuǎn)失敗的解決
history模式下子路由跳轉(zhuǎ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)路由的問題，查了很多資料，最后找到了解決辦法。
對(duì)登錄頁(yè)面的用戶名和密碼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，但是并沒有詳細(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)管理界面(需要回退的話用push)
? ? ? ? ? ? ? ? this.props.history.replace('/')
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? //提示錯(cuò)誤信息
? ? ? ? ? ? ? ? message.error(result.msg)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? console.log('校驗(yà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中ref標(biāo)簽屬性和$ref的關(guān)系解讀
這篇文章主要介紹了vue中ref標(biāo)簽屬性和$ref的關(guān)系，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
在實(shí)際項(xiàng)目開發(fā)過程中，如果公共數(shù)據(jù)比較多我們會(huì)使用vuex做公共狀態(tài)管理，但是在對(duì)瀏覽器進(jìn)行刷新操作的時(shí)候，會(huì)導(dǎo)致vuex內(nèi)的數(shù)據(jù)丟失，這種情況有些時(shí)候是沒問題的，但是有的時(shí)候我們需要某些數(shù)據(jù)可以持久化的保存，這樣就需要做對(duì)應(yīng)的處理2023-01-01
解決vue.js提交數(shù)組時(shí)出現(xiàn)數(shù)組下標(biāo)的問題
今天小編就為大家分享一篇解決vue.js提交數(shù)組時(shí)出現(xiàn)數(shù)組下標(biāo)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式
這篇文章主要介紹了vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Vue3.0 前的 TypeScript 最佳入門實(shí)踐
這篇文章主要介紹了詳解Vue3.0 前的 TypeScript 最佳入門實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12
關(guān)于Vue3父子組件emit參數(shù)傳遞問題(解決Vue2this.$emit無(wú)效問題)
相信很多人在利用事件驅(qū)動(dòng)向父組件扔?xùn)|西的時(shí)候，發(fā)現(xiàn)原來(lái)最常用的this.$emit咋報(bào)錯(cuò)了,竟然用不了了,下面通過本文給大家分享關(guān)于Vue3父子組件emit參數(shù)傳遞問題(解決Vue2this.$emit無(wú)效問題),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3.0 響應(yīng)式系統(tǒng)源碼逐行分析講解
這篇文章主要介紹了Vue3.0 響應(yīng)式系統(tǒng)源碼逐行分析講解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue操作dom并為dom增加點(diǎn)擊事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04