React路由中的重定向元件和Switch元件

2021-10-05 16:52:50 字數 774 閱讀 1047

重定向元件

如果訪問某個元件時,如果有重定向元件,那麼就會修改頁面路徑,使得頁面內容顯示為所定向路徑的內容
switch元件

讓switch元件內容的route只匹配乙個,只要匹配成功了,後面的路由就不會再匹配
我們還是用history路由來舉例子

import react from 'react';

import from 'react-router-dom'

function logininfo(props)else

}let formcom = ()=>

} return (

登入驗證後頁面

)}// 不用link進行跳轉

class childcom extends react.component

clickevent=()=>)

// this.props.history.replace("/",) 不能後退了

// this.props.history.go(1) this.props.history.goforward() 前進

// this.props.history.go(-1) this.props.history.goback() 後退

} } render()

()}>

()}>

()}>

()}>

()}>

)}}

基本上注釋什麼的我都寫在**裡了

學習前端 vue元件 路由重定向

在這裡先附上 官方鏈結 在官方中沒有具體表述路由重定向的含義對於新人來說可能不太好理解。路由重定向指 使用者在訪問a位址時,強制頁面跳轉到b頁面,從而展示特定的元件頁面 通過路由規則 redirect 屬性 就可以指向乙個新的位址 可以很方便的設定路由重定向 const router new vue...

VUE 2 渲染元件 重定向路由

router view 渲染路徑匹配到的檢視元件2.刪除components下的所有元件 3.刪除views資料夾 import vue from vue import vuerouter from vue router vue.use vuerouter 路由規則 const routes con...

vue路由的重定向

需求 專案的某些頁面沒有登入 本地沒有賬號密碼 是不允許檢視的,需要退出到登入頁面 之前寫react專案都是在對應頁面的willmount週期中處理的,近日學vue學到乙個統一處理的方式 1.單獨生成乙個redirect.js檔案,內容如下 路由重定向,在跳轉之前確認是否確認跳轉到該頁面 impor...