一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解

更新時(shí)間：2022年08月25日 08:48:53 作者：超級(jí)大柱子

這篇文章主要為大家介紹了一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

???? 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)行一系列的事件處理.

View DEMO

特性:

類似移動(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)畫

您可以設(shè)置多種頁(yè)面導(dǎo)航動(dòng)畫

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;
});

最后附上:

solid-router-stack Github 地址

以上就是一款移動(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)文章！

您可能感興趣的文章: