介绍
@skatejs/sk-router 是一个基于 Web Components 的路由框架，它可以让你在你的应用程序中轻松实现页面导航和路由功能。它支持多视图和嵌套路由，允许你通过自定义标签或 JavaScript 的方式创建路由器、路由和链接等组件。在使用它之前，你需要了解以下几个概念：
- 路由器（
<sk-router>）：它是整个路由框架的核心，它负责监听 URL 的变化，匹配路由规则并渲染对应的视图。 - 路由（
<sk-route>）：它定义了一个路由规则、对应的组件和参数。当 URL 匹配到该路由规则时，路由器会渲染该路由对应的组件。 - 链接（
<sk-link>）：它用于在应用程序内部和外部创建导航链接。当点击该链接时，路由器会改变 URL 并渲染对应的视图。
安装和配置
在使用 @skatejs/sk-router 之前，你需要先安装，并且在你的应用程序中进行配置。
安装
你可以通过 npm 安装这个包：
npm install @skatejs/sk-router --save
配置
导入
@skatejs/sk-router：import { define, v } from '@skatejs/skate'; import { Router, Route, Link } from '@skatejs/sk-router';创建一个路由器：
const router = new Router();
定义你的路由规则，例如：
-- -------------------- ---- ------- ---------------- ----- ------- ----------- - ------------------- - -------------- - - -------- ----- -------- ----------------------- -------- ----------------------------- -------- --------------------------------- ------ --------- ----------- --------- -------- ------------------------------- --------- ------------- -------------------------------- --------- --------------- ---------------------------------- ------------ -- - ---在这个例子中，
<my-link>组件是一个自定义组件，通过这个组件，你可以创建一个内部的导航链接。<sk-router>组件是路由器，它包含所有的路由规则。每个路由规则都有一个对应的组件。你可以自定义这些组件并命名为my-home、my-about和my-contact。在你的应用程序中使用路由器：
const mountPoint = document.querySelector('#mount-point'); mountPoint.innerHTML = `<my-app></my-app>`; router.init(mountPoint); // 或者 document.body.appendChild(router);在这个例子中，你需要将你的应用程序挂载到一个 HTML 元素上（例如
#mount-point），然后调用router.init(mountPoint)方法来初始化路由器。你也可以将路由器直接挂载到document.body上。
组件使用方法
<sk-router>
<sk-router> 负责监听 URL 的变化，匹配路由规则并渲染对应的视图。在你的 HTML 文件中，你需要把所有的 <sk-route> 组件都放在 <sk-router> 组件内部。例如：
<sk-router> <sk-route path="/" component="my-home"></sk-route> <sk-route path="/about" component="my-about"></sk-route> <sk-route path="/contact" component="my-contact"></sk-route> </sk-router>
<sk-route>
<sk-route> 组件定义了一个路由规则、对应的组件和参数。它有两个属性：
- path（必需）：路由的规则。当 URL 中的路径与该规则匹配时，路由器就会渲染对应的组件。
- component（必需）：路由对应的组件名称。该组件需要在你的应用程序中定义并导入。
例如：
<sk-router> <sk-route path="/" component="my-home"></sk-route> <sk-route path="/about" component="my-about"></sk-route> <sk-route path="/contact?name=:name" component="my-contact"></sk-route> </sk-router>
在这个例子中，当 URL 的路径为 / 时，路由器会渲染 my-home 组件；当 URL 的路径为 /about 时，路由器会渲染 my-about 组件；当 URL 的路径为 /contact 且带有 name 参数时（例如 /contact?name=张三），路由器会渲染 my-contact 组件，并且你可以在 my-contact 组件中通过 this.route.params.name 获取 name 参数的值。
<sk-link>
<sk-link> 组件用于在应用程序内部和外部创建导航链接。它有一个属性：
- href（必需）：链接的目标地址。
例如：
<nav> <my-link href="/">Home</my-link> <my-link href="/about">About</my-link> <my-link href="/contact?name=张三">Contact</my-link> <a href="https://example.com">Example</a> </nav>
在这个例子中，当你点击 Home 链接时，路由器就会渲染对应的组件，并把 URL 的路径改变为 /；当你点击 Example 链接时，浏览器会导航到 https://example.com。
示例代码
下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
-------
------
---- -----------------------
------- --------------
------ - ------- - - ---- -----------------
------ - ------- ------ ---- - ---- ---------------------
----------------- ----- ------- ----------- -
------------------- -
-------------- - ----------- ------------
-
---
------------------ ----- ------- ----------- -
------------------- -
-------------- - ----------- -------------
-
---
-------------------- ----- ------- ----------- -
------------------- -
-------------- - ----------- ---------------------------------
-
---
----------------- -
-------- ----
-------- -
------------------------------ ----- -- -
-----------------------
----------------------- ----- ---------------------------
------------------------ ---------------------------
---
-
---
---------------- ----- ------- ----------- -
------------------- -
----- ------ - --- ---------
----- ---------- - ------- -------
-------------------- - -
--------
-----
-------- -----------------------
-------- -----------------------------
-------- -----------------------------------------
------
---------
-----------
--------- -------- -------------------------------
--------- ------------- --------------------------------
--------- -------------------------- ----------------------------------
------------
--
------------------------
-
---
------------------------------------------------------------
---------
-------
-------总结
通过本文，你应该已经了解了 @skatejs/sk-router 的基本使用方法和相关概念。如果你想深入学习路由器的高级用法，你可以查看 官方文档。
希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d29