@aaronshaf/html-router 中文文档教程

发布于 6年前 浏览 25 项目主页 更新于 3年前

嵌入式路由器。

Usage

Hash router

<script src="https://unpkg.com/@aaronshaf/html-router@1/hash.js" type="module"></script>

Render first match (example)

<ul>
  <li><a href="#/foo">Foo</a></li>
  <li><a href="#/bar">Bar</a></li>
  <li><a href="#/baz">Baz</a></li>
</ul>
<hash-switch>
  <template data-path="/foo">
    <h1>Foo</h1>
  </template>

  <template data-path="/bar">
    <h1>Bar</h1>
  </template>

  <template data-path="(.*)">
    <h1>Not found</h1>
  </template>
</hash-switch>

Standalone routes (example)

<ul>
  <li><a href="#/">Home</a></li>
  <li><a href="#/foo">Foo</a></li>
  <li><a href="#/foo/bar">Foo and Bar</a></li>
</ul>
<hash-route path="/">
  <h2>Home</h2>
</hash-route>

<hash-route path="/foo(.*)">
  <h2>Foo</h2>
</hash-route>

<hash-route path="/foo/bar">
  <h2>Bar</h2>
</hash-route>

Pathname router

<script src="https://unpkg.com/@aaronshaf/html-router@1/pathname.js" type="module"></script>

Render first match (example)

<ul>
  <li>
    <pushstate-link><a href="/foo">Foo</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/bar">Bar</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/baz">Baz</a></pushstate-link>
  </li>
</ul>
<pathname-switch>
  <template data-path="/foo">
    <h1>Foo</h1>
  </template>

  <template data-path="/bar">
    <h1>Bar</h1>
  </template>

  <template data-path="(.*)">
    <h1>Not found</h1>
  </template>
</pathname-switch>

Standalone routes (example)

<ul>
  <li>
    <pushstate-link><a href="/foo">Foo</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/foo/bar">Foo & Bar</a></pushstate-link>
  </li>
</ul>
<pathname-route path="/foo(.*)">
  <h2>Foo</h2>
</pathname-route>

<pathname-route path="/foo/bar">
  <h2>Bar</h2>
</pathname-route>

Access match params

作为路由或开关子项的自定义元素可以访问 this.match 中的匹配数据。

Prevent flash of undefined content

<style>
hash-switch:not(:defined),
pathname-switch:not(:defined) {
  visibility: hidden;
}
</style>

Web components polyfill

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js"></script>

Drop-in router.

Usage

Hash router

<script src="https://unpkg.com/@aaronshaf/html-router@1/hash.js" type="module"></script>

Render first match (example)

<ul>
  <li><a href="#/foo">Foo</a></li>
  <li><a href="#/bar">Bar</a></li>
  <li><a href="#/baz">Baz</a></li>
</ul>
<hash-switch>
  <template data-path="/foo">
    <h1>Foo</h1>
  </template>

  <template data-path="/bar">
    <h1>Bar</h1>
  </template>

  <template data-path="(.*)">
    <h1>Not found</h1>
  </template>
</hash-switch>

Standalone routes (example)

<ul>
  <li><a href="#/">Home</a></li>
  <li><a href="#/foo">Foo</a></li>
  <li><a href="#/foo/bar">Foo and Bar</a></li>
</ul>
<hash-route path="/">
  <h2>Home</h2>
</hash-route>

<hash-route path="/foo(.*)">
  <h2>Foo</h2>
</hash-route>

<hash-route path="/foo/bar">
  <h2>Bar</h2>
</hash-route>

Pathname router

<script src="https://unpkg.com/@aaronshaf/html-router@1/pathname.js" type="module"></script>

Render first match (example)

<ul>
  <li>
    <pushstate-link><a href="/foo">Foo</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/bar">Bar</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/baz">Baz</a></pushstate-link>
  </li>
</ul>
<pathname-switch>
  <template data-path="/foo">
    <h1>Foo</h1>
  </template>

  <template data-path="/bar">
    <h1>Bar</h1>
  </template>

  <template data-path="(.*)">
    <h1>Not found</h1>
  </template>
</pathname-switch>

Standalone routes (example)

<ul>
  <li>
    <pushstate-link><a href="/foo">Foo</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/foo/bar">Foo & Bar</a></pushstate-link>
  </li>
</ul>
<pathname-route path="/foo(.*)">
  <h2>Foo</h2>
</pathname-route>

<pathname-route path="/foo/bar">
  <h2>Bar</h2>
</pathname-route>

Access match params

Custom elements that are children of a route or switch can access match data at this.match.

Prevent flash of undefined content

<style>
hash-switch:not(:defined),
pathname-switch:not(:defined) {
  visibility: hidden;
}
</style>

Web components polyfill

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js"></script>
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文