個人筆記 Vue和React的簡單路由攔截

2021-10-01 12:30:57 字數 835 閱讀 1301

之前一直基本都是用vue開發,後來有幾個專案改用react,實話說react做圖表類後台監控確實真香,元件開發和jsx語法也有點香的味道,不過相比之下。react的路由就沒有vue的舒服。

react-router不像vue-router那樣簡便,很多東西需要自行去寫,也沒有提供類似於router-beforeeach的路由守衛,而react要實現路由守衛需要自己去寫,基於我的專案我發現了一種比較簡單的方式

//先介紹我的react路由配置

/router/index.js

/>)})

}

//在content元件內

//這是內容配置

//還需要引入withrouter,這個是把你的元件包裹在route裡面,如果不配置,例如this.props.location.pathname這個值就取不到的,然後在componentwillunmount中把sessionstorage清除掉,這樣你回去登入頁就沒辦法返回了

//而vue-router就簡單很多了,在main.js裡面

router.beforeeach((to, from, next) => else

} else

if (from.name == 'login' && name == null || from.name == '*' && name == null)

if (to.name == 'login' && name || from.name == '*' && name)

})

vue 的路由攔截提供了api簡單很多,但是寫起來感覺就沒有react配的高大上了。。。

個人愚見 React 和 Vue 區別

一.相似之處 它們都是前端優秀的ui庫 使用 virtual dom快速渲染 提供了響應式 reactive 和元件化 composable 的檢視元件。都支援服務端渲染 將注意力集中保持在核心庫,而將其他功能如路由和全域性狀態管理交給相關的庫。二.不同之處 效能方面react 元件的狀態有變化時,...

Vue個人筆記

對於任何複雜邏輯,你都應當使用計算屬性 computed reversed message 4,事件的繫結 v on 指令用於監聽 dom 事件,引數為事件名稱,引號內為繫結的事件處理函式或者是 j ascript 不推薦 簡寫形式為 4 2事件修飾符 類似的還有停止冒泡 stop 只當事件在當前元...

react和vue的比較

相同點 5,react和vue都是狀態機,狀態改變則元件自動重新整理 react this.state change 為了重新整理狀態而寫 render 不同點 1,react中可變資料放置在state狀態管理中,使用this.state.name來呼叫 vue放置在data中,使用v bind呼叫...