reitit/frontend/browser.html
2018-09-08 07:58:43 +00:00

829 lines
21 KiB
HTML

<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Browser integration · GitBook</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-hints/plugin-hints.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="controllers.html" />
<link rel="prev" href="basics.html" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="header">Introduction</li>
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="header">Basics</li>
<li class="chapter " data-level="2.1" data-path="../basics/route_syntax.html">
<a href="../basics/route_syntax.html">
Route Syntax
</a>
</li>
<li class="chapter " data-level="2.2" data-path="../basics/router.html">
<a href="../basics/router.html">
Router
</a>
</li>
<li class="chapter " data-level="2.3" data-path="../basics/path_based_routing.html">
<a href="../basics/path_based_routing.html">
Path-based Routing
</a>
</li>
<li class="chapter " data-level="2.4" data-path="../basics/name_based_routing.html">
<a href="../basics/name_based_routing.html">
Name-based Routing
</a>
</li>
<li class="chapter " data-level="2.5" data-path="../basics/route_data.html">
<a href="../basics/route_data.html">
Route Data
</a>
</li>
<li class="chapter " data-level="2.6" data-path="../basics/route_data_validation.html">
<a href="../basics/route_data_validation.html">
Route Data Validation
</a>
</li>
<li class="chapter " data-level="2.7" data-path="../basics/route_conflicts.html">
<a href="../basics/route_conflicts.html">
Route Conflicts
</a>
</li>
<li class="header">Coercion</li>
<li class="chapter " data-level="3.1" data-path="../coercion/coercion.html">
<a href="../coercion/coercion.html">
Coercion Explained
</a>
</li>
<li class="chapter " data-level="3.2" data-path="../coercion/schema_coercion.html">
<a href="../coercion/schema_coercion.html">
Plumatic Schema
</a>
</li>
<li class="chapter " data-level="3.3" data-path="../coercion/clojure_spec_coercion.html">
<a href="../coercion/clojure_spec_coercion.html">
Clojure.spec
</a>
</li>
<li class="chapter " data-level="3.4" data-path="../coercion/data_spec_coercion.html">
<a href="../coercion/data_spec_coercion.html">
Data-specs
</a>
</li>
<li class="header">Ring</li>
<li class="chapter " data-level="4.1" data-path="../ring/ring.html">
<a href="../ring/ring.html">
Ring-router
</a>
</li>
<li class="chapter " data-level="4.2" data-path="../ring/reverse_routing.html">
<a href="../ring/reverse_routing.html">
Reverse-routing
</a>
</li>
<li class="chapter " data-level="4.3" data-path="../ring/default_handler.html">
<a href="../ring/default_handler.html">
Default handler
</a>
</li>
<li class="chapter " data-level="4.4" data-path="../ring/static.html">
<a href="../ring/static.html">
Static Resources
</a>
</li>
<li class="chapter " data-level="4.5" data-path="../ring/dynamic_extensions.html">
<a href="../ring/dynamic_extensions.html">
Dynamic Extensions
</a>
</li>
<li class="chapter " data-level="4.6" data-path="../ring/data_driven_middleware.html">
<a href="../ring/data_driven_middleware.html">
Data-driven Middleware
</a>
</li>
<li class="chapter " data-level="4.7" data-path="../ring/transforming_middleware_chain.html">
<a href="../ring/transforming_middleware_chain.html">
Transforming Middleware Chain
</a>
</li>
<li class="chapter " data-level="4.8" data-path="../ring/middleware_registry.html">
<a href="../ring/middleware_registry.html">
Middleware Registry
</a>
</li>
<li class="chapter " data-level="4.9" data-path="../ring/default_middleware.html">
<a href="../ring/default_middleware.html">
Default Middleware
</a>
</li>
<li class="chapter " data-level="4.10" data-path="../ring/coercion.html">
<a href="../ring/coercion.html">
Pluggable Coercion
</a>
</li>
<li class="chapter " data-level="4.11" data-path="../ring/route_data_validation.html">
<a href="../ring/route_data_validation.html">
Route Data Validation
</a>
</li>
<li class="chapter " data-level="4.12" data-path="../ring/compiling_middleware.html">
<a href="../ring/compiling_middleware.html">
Compiling Middleware
</a>
</li>
<li class="chapter " data-level="4.13" data-path="../ring/swagger.html">
<a href="../ring/swagger.html">
Swagger Support
</a>
</li>
<li class="header">HTTP</li>
<li class="chapter " data-level="5.1" data-path="../http/interceptors.html">
<a href="../http/interceptors.html">
Interceptors
</a>
</li>
<li class="chapter " data-level="5.2" data-path="../http/pedestal.html">
<a href="../http/pedestal.html">
Pedestal
</a>
</li>
<li class="chapter " data-level="5.3" data-path="../http/sieppari.html">
<a href="../http/sieppari.html">
Sieppari
</a>
</li>
<li class="chapter " data-level="5.4" data-path="../http/default_interceptors.html">
<a href="../http/default_interceptors.html">
Default Interceptors
</a>
</li>
<li class="header">Frontend</li>
<li class="chapter " data-level="6.1" data-path="basics.html">
<a href="basics.html">
Basics
</a>
</li>
<li class="chapter active" data-level="6.2" data-path="browser.html">
<a href="browser.html">
Browser integration
</a>
</li>
<li class="chapter " data-level="6.3" data-path="controllers.html">
<a href="controllers.html">
Controllers
</a>
</li>
<li class="header">Advanced</li>
<li class="chapter " data-level="7.1" data-path="../advanced/configuring_routers.html">
<a href="../advanced/configuring_routers.html">
Configuring Routers
</a>
</li>
<li class="chapter " data-level="7.2" data-path="../advanced/composing_routers.html">
<a href="../advanced/composing_routers.html">
Composing Routers
</a>
</li>
<li class="chapter " data-level="7.3" data-path="../advanced/different_routers.html">
<a href="../advanced/different_routers.html">
Different Routers
</a>
</li>
<li class="chapter " data-level="7.4" data-path="../advanced/route_validation.html">
<a href="../advanced/route_validation.html">
Route Validation
</a>
</li>
<li class="chapter " data-level="7.5" data-path="../advanced/dev_workflow.html">
<a href="../advanced/dev_workflow.html">
Dev Workflow
</a>
</li>
<li class="chapter " data-level="7.6" data-path="../advanced/shared_routes.html">
<a href="../advanced/shared_routes.html">
Shared Routes
</a>
</li>
<li class="header">Misc</li>
<li class="chapter " data-level="8.1" data-path="../performance.html">
<a href="../performance.html">
Performance
</a>
</li>
<li class="chapter " data-level="8.2" data-path="../development.html">
<a href="../development.html">
Development Instructions
</a>
</li>
<li class="chapter " data-level="8.3" data-path="../faq.html">
<a href="../faq.html">
FAQ
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Browser integration</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="frontend-browser-integration">Frontend browser integration</h1>
<p>Reitit includes two browser history integrations.</p>
<p>Functions follow HTML5 History API: <code>push-state</code> to change route, <code>replace-state</code>
to change route without leaving previous entry in browser history.</p>
<h2 id="fragment-router">Fragment router</h2>
<p>Fragment is simple integration which stores the current route in URL fragment,
i.e. after <code>#</code>. This means the route is never part of the request URI and
server will always know which file to return (<code>index.html</code>).</p>
<h2 id="html5-router">HTML5 router</h2>
<p>HTML5 History API can be used to modify the URL in browser without making
request to the server. This means the URL will look normal, but the downside is
that the server must respond to all routes with correct file (<code>index.html</code>).
Check examples for simple Ring handler example.</p>
<h2 id="easy">Easy</h2>
<p>Reitit frontend routers require storing the state somewhere and passing it to
all the calls. Wrapper (<code>reitit.frontend.easy</code>) is provided which manages
router instance and passes the instance to all calls.</p>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="basics.html" class="navigation navigation-prev " aria-label="Previous page: Basics">
<i class="fa fa-angle-left"></i>
</a>
<a href="controllers.html" class="navigation navigation-next " aria-label="Next page: Controllers">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Browser integration","level":"6.2","depth":1,"next":{"title":"Controllers","level":"6.3","depth":1,"path":"frontend/controllers.md","ref":"frontend/controllers.md","articles":[]},"previous":{"title":"Basics","level":"6.1","depth":1,"path":"frontend/basics.md","ref":"frontend/basics.md","articles":[]},"dir":"ltr"},"config":{"plugins":["hints","editlink","github","highlight"],"root":"doc","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"github":{"url":"https://github.com/metosin/reitit"},"editlink":{"label":"Edit This Page","multilingual":false,"base":"https://github.com/metosin/reitit/tree/master/doc"},"search":{},"hints":{"danger":"fa fa-exclamation-circle","info":"fa fa-info-circle","tip":"fa fa-mortar-board","working":"fa fa-wrench"},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"gitbook":"*"},"file":{"path":"frontend/browser.md","mtime":"2018-09-08T07:57:45.138Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-09-08T07:58:35.742Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-editlink/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>