Riot.js v4 대응 Router 2

13624 단어 riotAdventCalendar자바스크립트riot.js
Riot.js Advent Calendar 2019 의 6일째가 비어 있었으므로 묻습니다.

Riot Router


Riot.js 가 v4 가 된 것으로 Riot Router 도 새롭게 되었으므로 재입문합니다.
htps : // 기주 b. 코 m / 리오 t / 납치
지난번 의 계속입니다.

URL 매개변수



전회부터 변경이 있는 곳만 올립니다.
route에서의 path 지정시에 :変数名 로 하는 것으로, URL 파라미터로서 받을 수가 있습니다.

app.riot
<my-app>
  <my-router>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/greeting/hello">Hello</a></li>
        <li><a href="/greeting/goodbye">Goodbye</a></li>
        <li><a href="/greeting/hola">Hola</a></li>
      </ul>
    </nav>

    <my-route path="(/|/index.html)">
      Welcome to home
    </my-route>
    <my-route path="/greeting/:message">
      <my-message message="{ route.params[0] }"></my-message>
    </my-route>
  </my-router>
</my-app>

message.riot
<my-message>
  <p>{ props.message.slice(0, 1).toUpperCase() }{ props.message.slice(1) } World!!</p>
</my-message>

index.js
import { component, register } from 'riot'
import { Router, Route } from '@riotjs/route'
import App from './app.riot'
//import Hello from './hello.riot'
//import Goodbye from './goodbye.riot'
import Message from './message.riot'

// グローバルコンポーネントとして登録
register('my-router', Router);
register('my-route', Route);
//register('my-hello', Hello);
//register('my-goodbye', Goodbye);
register('my-message', Message);

// グローバルに登録せずに直接コンポーネントを生成＆マウント
component(App)(document.getElementById('app'));
/greeting 로 했으므로, bundle.js 의 패스도 변경해 둡니다. (URL 직접 액세스 대책)

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Riot Router</title>
</head>
<body>
  <div id="app"></div>
  <script src="/scripts/bundle.js"></script>
</body>
</html>

path="/:some/:route/:params" 등으로 하는 것으로, 복수 받을 수도 있습니다.

쿼리 매개변수



route에서의 path 지정시에 뒤를 가변으로 하는 것으로, 쿼리 파라미터를 받을 수가 있습니다.

app.riot
<my-app>
  <my-router>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/greeting?message=hello">Hello</a></li>
        <li><a href="/greeting?message=goodbye">Goodbye</a></li>
        <li><a href="/greeting?message=hola">Hola</a></li>
      </ul>
    </nav>

    <my-route path="(/|/index.html)">
      Welcome to home
    </my-route>
    <my-route path="/greeting(.*)">
      <my-message message="{ route.searchParams.get('message') }"></my-message>
    </my-route>
  </my-router>
</my-app>



트리거



Riot Router의 기능보다는 Rawth의 기능입니다.

index.js
import { component, register } from 'riot'
import { Router, Route, router  } from '@riotjs/route'
import App from './app.riot'
//import Hello from './hello.riot'
//import Goodbye from './goodbye.riot'
import Message from './message.riot'

// グローバルコンポーネントとして登録
register('my-router', Router);
register('my-route', Route);
//register('my-hello', Hello);
//register('my-goodbye', Goodbye);
register('my-message', Message);

// グローバルに登録せずに直接コンポーネントを生成＆マウント
component(App)(document.getElementById('app'));

// routerトリガー
router.on.value(path => {
  // 全てのURLに反応
  console.log(path);
});

app.riot
<my-app>
  <my-router>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/greeting?message=hello">Hello</a></li>
        <li><a href="/greeting?message=goodbye">Goodbye</a></li>
        <li><a href="/greeting?message=hola">Hola</a></li>
        <li><a href="/unknown">unknown</a></li>
      </ul>
    </nav>

    <my-route path="(/|/index.html)">
      Welcome to home
    </my-route>
    <my-route path="/greeting(.*)">
      <my-message message="{ route.searchParams.get('message') }"></my-message>
    </my-route>
  </my-router>
</my-app>

MysqlConnector로 인증서를 통한 보안 통신 구현
re:Invent 2019 - Keynote with Andy Jassy Amazon SageMaker 서비스 요약

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage