{"id":491264,"date":"2026-08-18T08:31:44","date_gmt":"2026-08-18T08:31:44","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=491264"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2026-08-18T08:31:44","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=491264","title":{"rendered":"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043c\u043e\u0440\u0433\u0430\u0435\u0442: SPA-\u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0434\u043b\u044f HTML \u0438 Web Components"},"content":{"rendered":"
\n

\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u0430\u044e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.\u00a0\u0423 HTML \u0438 Web Components \u0435\u0433\u043e \u043d\u0435\u0442.\u00a0\u0415\u0441\u043b\u0438 \u0441\u0430\u0439\u0442 \u0443\u0436\u0435 \u043e\u0442\u0434\u0430\u0451\u0442 \u043f\u043e\u043b\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b,\u00a0\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043d\u0443\u0436\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432,\u00a0\u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0435\u0437\u0430\u0447\u0435\u043c. <\/p>\n

\u0422\u0430\u043a\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445. \u041d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0434\u0432\u0430-\u0442\u0440\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0436\u0438\u0442\u044c \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0435 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0434\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041f\u0440\u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u043c \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0435 \u043f\u0440\u044f\u043c\u044b\u0435 URL \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438: \u0434\u043b\u044f SEO, \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 JavaScript \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f.<\/p>\n

\u042d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 History API, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 HTML, \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043f\u0440\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u043c JavaScript \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u041c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u043c\u0438\u043d\u0438-\u0440\u043e\u0443\u0442\u0435\u0440 \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u0432 JavaScript \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0434\u0435\u0440\u0435\u0432\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u2014 \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 JavaScript.<\/p>\n

\u0415\u0441\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0434\u0430\u0451\u0442 \u0441\u0435\u0440\u0432\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Aura Router<\/a>: \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a Custom Elements, \u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 <a href><\/code>. \u0411\u0435\u0437 JavaScript \u0442\u0435 \u0436\u0435 URL \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n

\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0430\u0439\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0412 \u043f\u0443\u0441\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435:<\/p>\n

npm init -ynpm install --save-exact @auraui\/router@0.1.0npm install --save-dev vite<\/code>
<\/a><\/div><\/pre>\n
index.html<\/code>:<\/p>\n
<!doctype html><html lang=\"ru\">  <head>    <meta charset=\"UTF-8\" \/>    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>    <title>Home<\/title>    <script type=\"module\" src=\"\/src\/main.js\"><\/script>  <\/head>  <body>    <nav>      <a href=\"\/\" aura-router-link>Home<\/a>      <a href=\"\/about\/\" aura-router-link>About<\/a>    <\/nav>    <main id=\"content\">      <h1>Home<\/h1>      <p>\u042d\u0442\u043e \u043f\u043e\u043b\u043d\u0430\u044f HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>    <\/main>    <aura-outlet><\/aura-outlet>    <aura-router extract=\"#content\">      <aura-route path=\"\/\" view=\"\/\"><\/aura-route>      <aura-route path=\"\/about\/\" view=\"\/about\/\"><\/aura-route>    <\/aura-router>  <\/body><\/html><\/code>
<\/a><\/div><\/pre>\n
\u0421\u0441\u044b\u043b\u043a\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 aura-router-link<\/code> \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0440\u043e\u0443\u0442\u0435\u0440\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043b\u0438\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439, \u0430 \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 extract=\"#content\"<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u043d\u043e\u0439 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 <aura-outlet><\/code>. \u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 Aura \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0443\u0436\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 #content<\/code> \u0438 \u043d\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u0440\u043e\u0443\u0442\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0438\u0437 \u043d\u0435\u0451 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 #content<\/code>.<\/p>\n
\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 index.html<\/code> \u0432 about\/index.html<\/code>. \u0421\u043c\u0435\u043d\u0438\u0442\u0435 <title><\/code> \u043d\u0430 About<\/code> \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0431\u043b\u043e\u043a #content<\/code>:<\/p>\n
<main id=\"content\">  <h1>About<\/h1>  <p>\u041f\u0440\u044f\u043c\u043e\u0439 \u0437\u0430\u0445\u043e\u0434 \u043d\u0430 \u044d\u0442\u043e\u0442 URL \u0442\u043e\u0436\u0435 \u043e\u0442\u0434\u0430\u0451\u0442 \u043f\u043e\u043b\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p><\/main><\/code>
<\/a><\/div><\/pre>\n
\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e, <aura-outlet><\/code>, \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u0438 \u0441\u043a\u0440\u0438\u043f\u0442 \u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0442\u0435\u043c\u0438 \u0436\u0435.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 src\/main.js<\/code>:<\/p>\n
import { AuraRouter } from \"@auraui\/router\";AuraRouter.install();<\/code>
<\/a><\/div><\/pre>\n
\u042d\u0442\u043e \u0432\u0435\u0441\u044c JavaScript.<\/p>\n
\u0417\u0430\u043f\u0443\u0441\u043a:<\/p>\n
npx vite<\/code>
<\/a><\/div><\/pre>\n
\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 URL, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442 Vite, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0442\u0440\u0438 \u043f\u0443\u043d\u043a\u0442\u0430:<\/p>\n
    \n
  1. \n
    \u041f\u0440\u044f\u043c\u043e\u0439 \u0437\u0430\u0445\u043e\u0434 \u043d\u0430 \/about\/<\/code> \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u043e\u0442\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u0430\u044f HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>\n<\/li>\n
  2. \n
    \u041a\u043b\u0438\u043a\u0438 \u043f\u043e Home \u0438 About \u2014 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f URL \u0438 #content<\/code>, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n
  3. \n
    \u041e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u0435 JavaScript \u0438 \u043f\u0440\u043e\u0439\u0434\u0438\u0442\u0435 \u0442\u0435 \u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0441\u0442\u0430\u043d\u0443\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043d\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n
    \u0411\u0435\u0437 npm \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c. \u0415\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0443\u0436\u0435 \u043e\u0442\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e HTTP, \u0432\u043c\u0435\u0441\u0442\u043e \/src\/main.js<\/code> \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432 \u043e\u0431\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n
    <script type=\"module\">  import { AuraRouter } from \"https:\/\/esm.sh\/@auraui\/router@0.1.0\";  AuraRouter.install();<\/script><\/code>
    <\/a><\/div><\/pre>\n
    \u0414\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430 \u043f\u0430\u043a\u0435\u0442 \u043b\u0443\u0447\u0448\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438\u0437 npm \u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
    \u0415\u0441\u043b\u0438 \u043e\u0431\u0449\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e URL, \u0432\u044b\u043d\u0435\u0441\u0438\u0442\u0435 \u0435\u0433\u043e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 (layout):<\/p>\n
    <template id=\"workspace-shell\">  <workspace-sidebar><\/workspace-sidebar>  <aura-outlet><\/aura-outlet><\/template><aura-route path=\"\/workspace\/\" layout=\"workspace-shell\">  <aura-route path=\".\" view=\"\/workspace\/\"><\/aura-route>  <aura-route path=\"settings\" view=\"\/workspace\/settings\/\"><\/aura-route><\/aura-route><\/code>
    <\/a><\/div><\/pre>\n
    \u041f\u043e\u043a\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \/workspace\/<\/code>, \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c, \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 <aura-outlet><\/code>. \u041f\u0440\u044f\u043c\u043e\u0439 \u0437\u0430\u0445\u043e\u0434 \u043d\u0430 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 URL \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043c\u0430\u043a\u0435\u0442, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 <aura-outlet><\/code> \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442. Aura \u044d\u0442\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043d\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442.<\/p>\n
    \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 URL \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439, \u0430 \u043f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u043c JavaScript \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c\u0438. \u042d\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c Aura Router; \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0434\u0435\u0440\u0435\u0432\u044c\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043f\u043e \u0442\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443.<\/p>\n
    \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0435\u043b\u0438\u0437 \u2014 0.1.0<\/code>, \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API \u0435\u0449\u0451 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0434\u043e 1.0<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u0443\u0447\u0448\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0447\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n
    \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b:<\/p>\n