一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解
???? solid-router-stack
你已經(jīng)開(kāi)始用了?試試這款移動(dòng)優(yōu)先的路由
桌面端路由和移動(dòng)端路由的區(qū)別
桌面端路由的特點(diǎn)是僅渲染當(dāng)前匹配的路由, 而移動(dòng)端路由的特點(diǎn)是頁(yè)面是一個(gè)棧, 歷史頁(yè)面會(huì)進(jìn)行保留.
這款 solid-router-stack 就是使用這種機(jī)制, 它可以減少返回頁(yè)面后, 需要重繪制當(dāng)前頁(yè)面的開(kāi)銷. 并且可以監(jiān)聽(tīng)如果棧下的頁(yè)面回到前臺(tái), 進(jìn)行一系列的事件處理.
特性:
- 類似移動(dòng)端導(dǎo)航, 保留頁(yè)面堆棧在DOM中
- 自動(dòng)懶加載頁(yè)面
- 當(dāng)你進(jìn)入到指定頁(yè)面時(shí), 輕松的預(yù)加載相關(guān)頁(yè)面
- 自動(dòng)讀取 URL params 到頁(yè)面的 Props 中
快速開(kāi)始
創(chuàng)建一個(gè)路由列表, 渲染到視圖中:
import { render } from "solid-js/web"; import { createRouter } from "solid-router-stack"; import Welcome from "./welcome"; export const routers = createRouter({ Welcome: { render: Welcome, // not use lazy import async: true, }, Login: { render: () => import("./sign/Login"), // preload other pages preload: ["User"], }, User: { render: () => import("./user"), }, }); // page background inherit the parent background: document.getElementById("root").style.background = "#fff"; render( () => <routers.Routers root={routers.Welcome} hash />, document.getElementById("root"); );
使用導(dǎo)航
剛剛創(chuàng)建的 routers 內(nèi)包含了所有頁(yè)面的導(dǎo)航方法, 比起直接使用 URL, 它更容易維護(hù), 其中入?yún)?duì)象會(huì)以 URL params 的形式傳遞到新頁(yè)面或返回的舊頁(yè)面.
import { routers } from "./routers"; function Welcome() { const handlePushProduct = () => { routers.user.push(); }; const handleReleaseProduct = () => { routers.user.replace({ id: "123" }); }; const handleClearToProduct = () => { routers.user.clearTo(); }; const handleGoBack = () => { routers.goBack(); }; return ( <div> <div onClick={handlePushProduct}>push product</div> <div onClick={handleReleaseProduct}>release product</div> <div onClick={handleClearToProduct}>clear all stack and push product</div> <div onClick={handleGoBack}>go back</div> </div> ); } export default Welcome;
使用 URL Params
當(dāng)你進(jìn)入頁(yè)面時(shí), 或者從返回到當(dāng)前頁(yè)面時(shí), 頁(yè)面的 Props 對(duì)象會(huì)更新, 你可以直接使用它, 由于 Solid 的特性它會(huì)自動(dòng)監(jiān)聽(tīng)變化.
不同于傳統(tǒng)頁(yè)面返回, stack頁(yè)面返回時(shí), 它不會(huì)重新渲染. 所以我們需要更新 props 以決定我們是否有需要重繪的行為.
const handlePush = () => { routers.somePage.push({dog:"im push"}); }; const handleGoBack = () => { routers.goBack({dog:"im go back"}); }; // params in props function App(p: {dog}) { return ( <div> {p.dog} </div> ); }
頁(yè)面導(dǎo)航動(dòng)畫(huà)
您可以設(shè)置多種頁(yè)面導(dǎo)航動(dòng)畫(huà)
import { setNavigationAnimation } from "solid-router-stack"; // like application setNavigationAnimation("moveTop");
不希望某個(gè)頁(yè)面持久在DOM中
你可以利用 <Show when={props.stackTop} />
改變當(dāng)前頁(yè)面的內(nèi)容是否持久在 DOM 中
const Page: Component = (props) => { return ( <Show when={props.stackTop}> <div>the page</div> </Show> ); };
導(dǎo)航事件監(jiān)聽(tīng)
添加監(jiān)聽(tīng)方法, 它會(huì)獲取 fromUrl 和 toUrl, 您可以通過(guò)返回一個(gè)新的 URL 來(lái)替換原本應(yīng)該導(dǎo)航的 toUrl
import { routers } from "./routers"; routers.listen(({ fromUrl, toUrl, kind, index }) => { console.log(fromUrl, toUrl, kind, index); // /hello, /next, "push", 2 return toUrl; });
最后附上:
以上就是一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解的詳細(xì)內(nèi)容,更多關(guān)于Solid.js移動(dòng)優(yōu)先路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果,實(shí)現(xiàn)步驟和思路都很簡(jiǎn)單,今天通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
在本篇文章中小編給大家分享了vue如何實(shí)現(xiàn)點(diǎn)擊隱藏與顯示的相關(guān)內(nèi)容,有需要的朋友們跟著學(xué)習(xí)下。2019-02-02Vue全局注冊(cè)與局部注冊(cè)兩種組件注冊(cè)的方式
本文主要介紹了Vue全局注冊(cè)與局部注冊(cè)兩種組件注冊(cè)的方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07從零到一詳聊創(chuàng)建Vue工程及遇到的常見(jiàn)問(wèn)題
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見(jiàn)問(wèn)題 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面
對(duì)于單頁(yè)應(yīng)用,官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理,這篇文章主要給大家介紹了Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-04-04vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉的示例代碼
本文主要介紹了vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉,這里采用的是vant的文件上傳組件,通過(guò)上傳圖片后端識(shí)別圖片里的人臉,感興趣的可以了解一下2021-11-11vue2手機(jī)APP項(xiàng)目添加開(kāi)屏廣告或者閃屏廣告
這篇文章主要為大家詳細(xì)介紹了vue2手機(jī)APP項(xiàng)目添加開(kāi)屏廣告或者閃屏廣告的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求)
這篇文章主要介紹了解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08