vue項目history模式下部署子路由跳轉(zhuǎn)失敗的解決
更新時間：2022年03月31日 11:22:33 作者：Jerome^_^
這篇文章主要介紹了vue項目history模式下部署子路由跳轉(zhuǎn)失敗的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
history模式下子路由跳轉(zhuǎn)失敗
問題描述：只有部分路由跳轉(zhuǎn)正常刷新也不會白屏，部分路由出現(xiàn)跳轉(zhuǎn)正常，刷新卻白屏。部分路由無法跳轉(zhuǎn)。刷新報錯如下圖同時頁面白屏
解決辦法：
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的時候，遇到了使用history跳轉(zhuǎn)路由的問題，查了很多資料，最后找到了解決辦法。
對登錄頁面的用戶名和密碼input值進行驗證，驗證成功后頁面跳轉(zhuǎn)到主頁面，但是在使用this.props.history.replace()時，發(fā)現(xiàn)并不能正常跳轉(zhuǎn)，而是出現(xiàn)了Paused in debugger，但是并沒有詳細提示出了什么錯，跳轉(zhuǎn)代碼如下：
? ? //對表單進行驗證
? ? 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('登陸成功')
? ? ? ? ? ? ? ? //跳轉(zhuǎn)到后臺管理界面(需要回退的話用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);以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中ref標(biāo)簽屬性和$ref的關(guān)系解讀
這篇文章主要介紹了vue中ref標(biāo)簽屬性和$ref的關(guān)系，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
在實際項目開發(fā)過程中，如果公共數(shù)據(jù)比較多我們會使用vuex做公共狀態(tài)管理，但是在對瀏覽器進行刷新操作的時候，會導(dǎo)致vuex內(nèi)的數(shù)據(jù)丟失，這種情況有些時候是沒問題的，但是有的時候我們需要某些數(shù)據(jù)可以持久化的保存，這樣就需要做對應(yīng)的處理2023-01-01
解決vue.js提交數(shù)組時出現(xiàn)數(shù)組下標(biāo)的問題
今天小編就為大家分享一篇解決vue.js提交數(shù)組時出現(xiàn)數(shù)組下標(biāo)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式
這篇文章主要介紹了vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解Vue3.0 前的 TypeScript 最佳入門實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(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無效問題)
相信很多人在利用事件驅(qū)動向父組件扔?xùn)|西的時候，發(fā)現(xiàn)原來最常用的this.$emit咋報錯了,竟然用不了了,下面通過本文給大家分享關(guān)于Vue3父子組件emit參數(shù)傳遞問題(解決Vue2this.$emit無效問題),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3.0 響應(yīng)式系統(tǒng)源碼逐行分析講解
這篇文章主要介紹了Vue3.0 響應(yīng)式系統(tǒng)源碼逐行分析講解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue操作dom并為dom增加點擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04