router-view
router-view is the heart of the router module. If you want to develop a single-page application, the main content should use this component to dynamically exchange its content. Conceptually, this is similar to a transition wrapper/container pattern as used by PJAX-like routing solutions. As a bigger example this site also uses this component to dynamically load its content. Your application can also have multiple views; only the ids need to be different.
The component attributes map to the following options:
| Option name | Type | Default | Description |
|---|---|---|---|
| id | string |
'main' |
The view id. Must be unique when using multiple views. |
| containerSelector | string |
auto-derived from id |
Defaults to router-view > *:first-child for main, otherwise router-view#<id> > *:first-child. |
| action | string |
'replace' |
Replaces the old container content with the new one. |
| scrollToTop | boolean |
true for main, else false |
Auto-scroll to top after route transition. |
| listenAllLinks | boolean |
true |
Loads content of links globally, even without rv-route. |
| listenPopstate | boolean |
true |
Handles browser back/forward navigation. |
| scrollToAnchorHash | boolean |
true for main, else false |
Scrolls to URL hash target after transition. |
| scrollToAnchorOffset | number |
RouterService.options.scrollToAnchorOffset |
Offset for hash scrolling. |
| datasetToRootScope | boolean |
true |
Binds container data-* values to $root.dataset. |
| parseTitle | boolean |
true |
Parses <title> and updates the tab title. |
| changeBrowserUrl | boolean |
true |
Updates browser URL during navigation. |
| prefetchLinks | boolean |
true |
Prefetches on hover/touchstart to speed up page loading. |
| transition | Transition |
HideShowTransition |
Transition object for page swap behavior. |
| transitions | TransitionDefinition[] |
[] |
Declarative transition list with rule-based selection. |
This is the content of the element with the router-view component.
rv-view-static
Loads the content of a url with pjax and replaces the host element with the fetched container element (default selector: [data-namespace]).
| Option name | Type | Default | Description |
|---|---|---|---|
| url | string |
The url whose content you want to display | |
| viewId | string |
handleized url |
Logical view id derived from the url (used by this binder setup) |
| containerSelector | string |
[data-namespace] |
Selector of the container child, here the HTML content is replace |
| transition | Transition |
HideShowTransition |
The transition object e.g. for animations |
rv-view-static is a block binder and internally disables global link listening, popstate handling, title parsing, and browser url changes for its internal pjax instance.
router-load-script
router-load-script loads external script sources declaratively.
<router-load-script src="https://cdn.example.com/some-lib.js"></router-load-script>
Use it for page-level scripts that should be loaded conditionally with routed content.