LitElement 및 TypeScript를 사용하여 라우팅 관리

대부분의 현대 프레임워크는 응용 프로그램의 보기 사이의 내비게이션을 처리하는 루트 메커니즘을 제공한다.SPA(단일 페이지 응용 프로그램)의 주요 기능입니다.
이것이 바로 노선이 일치하는 의미이다.SP A가 라우터에 의존하는 경우 지원 위치가 있는 라우팅 그룹을 정의해야 합니다.
JavaScript 세계에서 대부분의 라우팅 정의는 다음과 같은 계발을 받습니다.

const routes = [
  { path: '/'}, 
  { path: 'posts'}, 
  { path: 'posts/:id'},
  { path: 'about'}
]

이 예에서는 path 값과 일치하는 특정 위치와 연관된 뷰를 렌더링합니다.
Express Routing

입문

이전 기사 에서 Litelement와 TypeScript를 사용하기 시작하는 방법을 설명했습니다.이러한 개념과 도구를 고려하여 우리가 해결해야 할 문제를 묘사합시다.

우편으로 배달하다 개인 사이트

Lit Element와 Type Script를 이용하여 블로그를 지원하는 개인 사이트를 구축하여 스파로 삼겠습니다.우리는 프로젝트의 다음과 같은 요구 사항을 고려할 수 있다.

블로그 게시물 목록을 홈페이지로 표시

글의 상세 정보를 포함하는 단일 보기

표시

정보 페이지 표시 허용

프로젝트 및 활동 포함 포트폴리오 표시

항목 만들기

제안된 프로젝트 생성기를 사용합니다.다음 명령을 실행하고 지침을 따릅니다.

npm init @open-wc
# Select "Scaffold a new project" (What would you like to do today?)
# Select "Application" (What would you like to scaffold?)
# Mark/Select "Linting", "Testing", "Demoing" and "Building" (What would you like to add?)
# Yes (Would you like to use TypeScript?)
# Mark/Select "Testing", "Demoing" and "Building" (Would you like to scaffold examples files for?)
# litelement-website (What is the tag name of your application/web component?)
# Yes (Do you want to write this file structure to disk?)
# Yes, with npm (Do you want to install dependencies?)

프로젝트 생성이 완료되면 다음 명령을 실행하여 실시간 재로드 지원을 사용하여 미리 보기를 시작합니다.

npm run start

앞의 명령은 개발 모드에서 유용한 TAK를 실행합니다.

open-wc(TypeScript 컴파일러)

을 통해 TypeScript 파일 컴파일 시작

웹 서버를 신속하게 다시 불러와서 개발합니다.입력 파일은 tsc 입니다.

파일을 편집할 때 웹 서버에서 브라우저를 다시 불러옵니다.

웹 구성 요소 라우팅

따라서 LitElement 및 TypeScript를 지원하는 초기 프로젝트가 이미 있습니다.이제 라우팅 정책을 선택할 때가 되었습니다. LitElement를 사용하여 웹 구성 요소를 구축하고 있기 때문입니다.
라우팅 지원을 추가하려면 을 찾을 수 있습니다.그 중에서 나는 several libraries가 재미있는 선택이라는 것을 발견했다.

와딩 라우터 와딩 라우터

공식 사이트에 따르면:

A small, powerful and framework-agnostic client-side router for Web Components

index.html는 현재 가장 유행하는 선택 중의 하나이다.클라이언트 JavaScript 프로젝트에 사용되는 작은 라이브러리입니다.
이 라이브러리를 TypeScript와 함께 사용할 때도 유형 설명을 사용할 수 있습니다.

라우터 라이브러리 설치

완전한 프레임워크를 설치하는 것이 아닙니다. 프로그램의 루트 요구를 충족시킬 수 있는 라이브러리만 있습니다.

npm install --save @vaadin/router

라우팅 구성

이제 다음 항목 구조를 고려하여 디렉토리의 각 파일에 웹 구성 요소가 있다고 가정합니다.

|- index.html
|- src/
    |- index.ts
    |- app.ts
    |- blog/
        |- blog.ts
        |- blog-posts.ts
        |- blog-post.ts

이렇게 하면 라우팅 구성을 하위 트리로 정의할 수 있습니다.

// app.ts
import { Router } from '@vaadin/router';

const routes = [
  {
    path: '/',
    component: 'lit-app',
    action: async () => {
      await import('./app');
    },
    children: [
      {
        path: 'blog',
        component: 'lit-blog',
        action: async () => {
          await import('./blog/blog');
        },
        children: [
          {
            path: '',
            redirect: '/blog/posts',
          },
          {
            path: 'posts',
            component: 'lit-blog-posts',
            action: async () => {
              await import('./blog/blog-posts');
            },
          },
          {
            path: 'posts/:id',
            component: 'lit-blog-post',
            action: async () => {
              await import('./blog/blog-post');
            },
          },
        ]
      },
      {
        path: 'about',
        component: 'lit-about',
        action: async () => {
          await import('./about/about');
        },
      },
    ]
  },
];

const outlet = document.getElementById('outlet');
export const router = new Router(outlet);
router.setRoutes(routes);

이러한 구성은 다음과 같습니다.

홈 페이지vaadin-router를 방문하면 blog 파일에 정의된 구성 요소를 불러오기 시작합니다.

경로가 로드되면 / 구성 요소가 기본적으로 표시됩니다. lit-app

블로그 글을 보려면 app.ts 경로에 액세스할 수 있습니다. 이 경로 /blog 는 블로그 글 식별자를 나타냅니다.

lit-blog-posts 경로에 다른 구성 요소가 로드됩니다.

또한 라우팅 구성은 시작할 때 모든 구성 요소를 로드하는 대신 동적 가져오기를 사용합니다.

{
  ...
  action: async () => {
    await import('./file');
  }
}

이 예에서 볼 수 있듯이 Vaadin 라우터는 를 통해 사용자 정의 로드 메커니즘을 구현할 수 있습니다.

라우팅 작업 사용자 정의 {path:','/blog/posts} 파일

참고 /blog/posts/:id 섹션:

<body>
  <div id="outlet"></div>
  <script type="module" src="./out-tsc/src/index.js"></script>
</body>

첫 번째 줄:id은 루트 설정의 시작점입니다. 왜냐하면 /about 클래스는 이 요소를 입력으로 하기 때문입니다.
또한 두 번째 줄index.html은 body 파일에서 제공된 경로를 불러오기 시작합니다.

어셈블리 생성

이제 첫 번째 구성 요소로 <div id="outlet"></div> 및 Router 을 만듭니다.

// app.ts

import { LitElement, html, customElement, css } from 'lit-element';

@customElement('lit-app')
export class App extends LitElement {
  static styles = css`
    .header {
      padding: 20px;
      font-size: 25px;
      text-align: center;
      background: white;
    }

    .topnav {
      background-color: #4f4c4c;
      overflow: hidden;
    }

    .topnav a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    .topnav a.active {
      background-color: #008CBA;
      color: white;
    }
  `;

  render() {
    return html`
      <div class="topnav">
        <a class="active" href="/">Home</a>
        <a href="/blog">Blog</a>
        <a href="/about">About</a>
      </div>
      <div class="header">
        <h2>LitElement Website</h2>
      </div>

      <slot></slot>
    `;
  }
}

// blog.ts
import { LitElement, html, customElement } from 'lit-element';

@customElement('lit-blog')
export class Blog extends LitElement {
  render() {
    return html`
      <slot></slot>
    `;
  }
}

앞의 구성 요소에서 보듯이 HTML 템플릿은 자리 표시자 <script type="module" src="./out-tsc/src/index.js"></script> 를 사용하여 위치를 지정하고 현재 경로에 따라 자신의 내용을 배치할 수 있습니다.
다음은 다음과 같은 블로그 게시물 목록을 표시하는 구성 요소 정의index.ts입니다.

// blog-posts.ts

import { LitElement, html, customElement, css } from 'lit-element';

@customElement('lit-blog-posts')
export class BlogPosts extends LitElement {
  render() {
    return html`
      <h2>Blog Posts</h2>
      <ul>
        <li><a href="/blog/posts/1">LitElement Introduction</a></li>
        <li><a href="/blog/posts/1">Secrets of JavaScript</a></li>
        <li><a href="/blog/posts/1">Web Components and TypeScript</a></li>
      </ul>
    `;
  }
}

같은 방식으로 lit-app 구성 요소를 정의하여 이전 목록에 표시된 모든 블로그 글의 상세한 정보를 보십시오.

// blog-post.ts

import { LitElement, html, customElement } from 'lit-element';

@customElement('lit-blog-post')
export class BlogPost extends LitElement {
  render() {
    return html`
      <h2>Blog Post Title</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis
        est, placerat ut risus non, bibendum tincidunt nisl. Sed vitae gravida
        urna. Maecenas ut efficitur massa, sed viverra dolor. Ut euismod, nibh
        vel suscipit porttitor, augue libero dictum lacus, et pellentesque enim
        libero quis dui. Curabitur lorem sapien, tristique eget dictum non,
        lobortis ac justo. Ut ac ipsum aliquam, vehicula metus eu, vulputate
        felis. Nunc commodo viverra dolor commodo viverra. Donec et leo diam.
        Duis iaculis cursus bibendum. Vivamus a venenatis turpis. Proin ultrices
        libero vel sollicitudin condimentum. Curabitur vitae nisl id orci
        placerat imperdiet. In eget orci leo. Fusce dignissim, orci nec
        fermentum lobortis, ligula massa bibendum mauris, at imperdiet velit
        purus a dolor. Donec et tempor ante.
      </p>
    `;
  }
}

최종 결과

마지막으로 TypeScript로 작성된 웹 응용 프로그램을 보고 다음 웹 구성 요소를 사용합니다.

소스 코드 항목

GitHub 저장소에서 전체 항목을 찾습니다. .별을 하나 주는 것을 잊지 마라⭐️ 그리고 코드를 해요.
너는 나와 함께 갈 수 있다https://github.com/luixaviles/litelement-website. 나의 일에 대한 더 많은 정보를 알 수 있다.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, Web Components, GraphQL, Node, Bazel 또는 Polymer에 대한 전문가 구조 지도, 교육 또는 문의는 GitHub를 참조하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용적이고 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 를 참조하십시오thisdotlabs.com.

Reference

이 문제에 관하여(LitElement 및 TypeScript를 사용하여 라우팅 관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thisdotmedia_staff/routing-management-with-litelement-3aj9

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)