😛 👯 🐸 Web组件路由 🧖🏻 🤦🏾 👩🏼‍🤝‍👨🏿

有时，似乎Web组件没有到达框架，特别是与最受欢迎的代表相比。但是，Web组件概念中所包含的标准的实现并没有掩盖大多数最紧迫的问题，这些问题足以轻松地使用库或少量优雅的代码来固定。这些功能之一是前端路由。该功能并不总是必需的，甚至可能是有争议的，但是在大多数框架中，该功能已经存在并被许多人使用。Web组件呢？我们将尝试使用navigo库实现路由。

为了使控制台命令在Windows上更好地工作，您可以从git发行版中为此系统安装Unix实用程序，或者显然使用WSL和终端的新功能。

首先，创建一个项目：

mkdir testnavigo
cd testnavigo
npm init

很多次我们按Enter键直到它释放，

然后我们将库

npm i navigo --save

创建index.html

并在其中连接库并定义应用程序的主类；此处它将封装路由和控制所有子组件的逻辑。

当元素在浏览器对象树中分配给我们的类的树中出现时，Web组件使我们有机会自动调用钩子。在其中，我们直接使用来自库github的示例的代码初始化路由库（在现实生活中，应该通过模块化加载来完成此操作）。

<script src="/node_modules/navigo/lib/navigo.min.js"></script>

<my-app></my-app>

<script type="module">

   class MyApp extends HTMLElement {

       connectedCallback() {
           let root = null;
           let useHash = true; // Defaults to: false
           let hash = '#!'; // Defaults to: '#'
           this.router = new Navigo(root, useHash, hash);
       }
    }
   customElements.define('my-app', MyApp);
</script>

添加路线处理：

connectedCallback() {
   let root = null;
   let useHash = true; // Defaults to: false
   let hash = '#!'; // Defaults to: '#'
   this.router = new Navigo(root, useHash, hash);
   router
       .on('page-a', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<page-a></page-a>');
       })
       .on('page-b', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<page-b></page-b>');
       })
       .on('*', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<div>Please click links above</div>');
       })
       .resolve();
}

每次更改路线时，我们的组件都会通过向其添加新标签来更新内部内容。仍然需要为新页面组件注册这些标签。

class PageA extends HTMLElement {
   connectedCallback() {
       this.insertAdjacentHTML('beforeend', '<div>This is a page A</div>');
   }
}
class PageB extends HTMLElement {
   connectedCallback() {
       this.insertAdjacentHTML('beforeend', '<div>This is a page B</div>');
   }
}
customElements.define('page-a', PageA);
customElements.define('page-b', PageB);

在页面的顶部，添加链接以检查导航：

<a href="page-a" data-navigo>Page A</a>
<a href="page-b" data-navigo>Page B</a>

data-navigo属性允许单击它们以由路由器处理，而不是请求后端。例如，这是开始的时间，例如：

npx http-server

在浏览器中打开127.0.0.1：8080或在浏览器中写入的内容，并确保一切正常。

现在，我们可以将所有内容分发到单独的文件中，附加模板并动态加载页面，将路由引入配置。 Web组件将承担应用程序对象生命周期中的大部分工作，在ook里razbindivat不应忘记打开事件razconnectdivat （）

因为我想展示它的完成速度，所以延伸更多的文章可能不会;）

在这方面我已经在文章中写道：

Web组件

和

Web组件作为框架的快速入门，组件的交互

等待新的启示^ W的文章，分享并喜欢！

可以在位包上的存储库中查看生成的源代码：https ://bitbucket.org/techminded/testnavigo/

Web组件路由

More articles: