Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug.yml
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ body:
id: repro
attributes:
label: Minimal reproduction
description: Smallest HTML + JS that shows the bug, or a link to a fork/playground. Prefer root-absolute paths and `aura-router-link`.
description: Smallest HTML + JS that shows the bug, or a link to a fork/playground. Prefer root-absolute paths and `data-aura-link`.
placeholder: |
```html
<aura-router>
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Serve a complete page for every URL and keep the same selector around the conten
**2. Declare routes. Mark the links.**

```html
<a href="/about/" aura-router-link>About</a>
<a href="/about/" data-aura-link>About</a>

<aura-outlet></aura-outlet>
<aura-router extract="#content">
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/01-fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ A minimal router:

```html
<nav>
<a href="/" aura-router-link>Home</a>
<a href="/about" aura-router-link>About</a>
<a href="/" data-aura-link>Home</a>
<a href="/about" data-aura-link>About</a>
</nav>

<aura-outlet></aura-outlet>
Expand Down
14 changes: 12 additions & 2 deletions docs/guide/02-routes-and-navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,21 @@ Parameterized routes require the browser's `URLPattern`. Catch-all values are av

## Navigation

Mark only links that Aura should intercept:
Mark only the links that Aura should intercept.

Use the `data-aura-link` attribute as the default marker for such links:
```html
<a href="/users/42?tab=profile" aura-router-link>User</a>
<a href="/users/42?tab=profile" data-aura-link>User</a>
```
You can customize which links are processed by configuring the `links-selector` in `<aura-router>`. For example, to use a different attribute:
```html
<aura-router links-selector="[data-spa-link]"></aura-router>
```
Or to handle all anchor tags on the page:
```html
<aura-router links-selector="a"></aura-router>
```
**Warning:** In this mode, every intercepted link must have a corresponding route defined in the router configuration. Failing to define a route for a URL will result in a 404 error, even if the page exists on the server.

Aura resolves the anchor's `href` as the browser does, requires the result to stay on the same origin, then navigates with `pathname + search + hash`.

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/03-views-and-layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ Nested routes let several pages share UI without remounting it on every navigati

```html
<template id="app-shell">
<nav><a href="/app/settings" aura-router-link>Settings</a></nav>
<nav><a href="/app/settings" data-aura-link>Settings</a></nav>
<aura-outlet></aura-outlet>
</template>

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/07-navigation-ux.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ Route-level `prefetch` inherits through parent routes. Use a child route or link
<aura-route path="/docs" prefetch="tap" view="docs.html"></aura-route>
</aura-router>

<a href="/docs" aura-router-link data-prefetch="false">Docs</a>
<a href="/docs" data-aura-link data-prefetch="false">Docs</a>
```

An absent `prefetch` attribute does not disable the feature; Aura falls back to `intent`. Set `prefetch="false"`, `off`, or `none` explicitly to opt out.
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/08-errors-and-accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ URLs with a hash do not receive branch matches.

### Link scope

`links-container-selector` narrows scanning to the closest matching ancestor of the router. `links-selector` controls both interception and scanning and defaults to `[aura-router-link]`.
`links-container-selector` narrows scanning to the closest matching ancestor of the router. `links-selector` controls both interception and scanning and defaults to `[data-aura-link]`.

### Read the active route branch

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/09-api-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ A child route can override any inherited value. Where supported, `none`, `off`,
| Attribute | Default / purpose |
| -------------------------- | ------------------------------------------------------------------------- |
| `outlet` | Selector; otherwise first document outlet, otherwise auto-created sibling |
| `links-selector` | `[aura-router-link]` |
| `links-selector` | `[data-aura-link]` |
| `links-container-selector` | Whole document when absent |
| `link-active-class` | No default; classes for exact active links |
| `link-active-branch-class` | No default; classes for active parent-section links |
Expand Down
4 changes: 2 additions & 2 deletions docs/recipes/nested.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ The layout remains mounted while navigation stays inside `/users`; only the chil
## Links

```html
<a href="/users/1" aura-router-link>User 1</a>
<a href="/users/2" aura-router-link>User 2</a>
<a href="/users/1" data-aura-link>User 1</a>
<a href="/users/2" data-aura-link>User 2</a>
```

Because the resolved view URL changes with `:id`, moving from `/users/1` to `/users/2` remounts the child; any `ready` hook runs again. Use a stable view plus `update` when the same mounted shell should handle every id.
Expand Down
2 changes: 1 addition & 1 deletion docs/recipes/not-found.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<template id="not-found">
<h1>404</h1>
<p><a href="/" aura-router-link>Home</a></p>
<p><a href="/" data-aura-link>Home</a></p>
</template>

<template id="error"><h1>Error</h1></template>
Expand Down
4 changes: 2 additions & 2 deletions docs/recipes/prefetch-cache.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
</aura-route>
</aura-router>

<a href="/contacts" aura-router-link data-prefetch="tap">Contacts</a>
<a href="/users/1" aura-router-link>User 1</a>
<a href="/contacts" data-aura-link data-prefetch="tap">Contacts</a>
<a href="/users/1" data-aura-link>User 1</a>
```

The router provides defaults; child routes and links only declare overrides.
Expand Down
6 changes: 3 additions & 3 deletions docs/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ Create `index.html`:
</head>
<body>
<nav aria-label="Main navigation">
<a href="/" aura-router-link>Home</a>
<a href="/about/" aura-router-link>About</a>
<a href="/" data-aura-link>Home</a>
<a href="/about/" data-aura-link>About</a>
</nav>

<main id="content">
Expand Down Expand Up @@ -115,7 +115,7 @@ Open the local URL printed by Vite, then check:

## If it does not work

**A link performs a full reload:** confirm that it has `aura-router-link` and points to the same origin.
**A link performs a full reload:** confirm that it has `data-aura-link` and points to the same origin.

**The wrong markup appears:** every page response must contain the selector configured in `extract` (`#content` here).

Expand Down
20 changes: 10 additions & 10 deletions playground/pages/parts/nav.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<nav class="nav">
<a href="/" aura-router-link>Index</a>
<a href="/about" aura-router-link>About</a>
<a href="/contacts" aura-router-link>Contacts</a>
<a href="/login" aura-router-link>Login</a>
<a href="/users" aura-router-link>Users</a>
<a href="/users/1" aura-router-link>User 1</a>
<a href="/users/2" aura-router-link>User 2</a>
<a href="/profile" aura-router-link>Profile</a>
<a href="/profile/settings" aura-router-link>Settings</a>
<a href="/error" aura-router-link>404</a>
<a href="/" data-aura-link>Index</a>
<a href="/about" data-aura-link>About</a>
<a href="/contacts" data-aura-link>Contacts</a>
<a href="/login" data-aura-link>Login</a>
<a href="/users" data-aura-link>Users</a>
<a href="/users/1" data-aura-link>User 1</a>
<a href="/users/2" data-aura-link>User 2</a>
<a href="/profile" data-aura-link>Profile</a>
<a href="/profile/settings" data-aura-link>Settings</a>
<a href="/error" data-aura-link>404</a>
</nav>
6 changes: 3 additions & 3 deletions playground/pages/parts/router.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ <h2>Users</h2>
<h2>Profile</h2>
<p class="hint">requires login (guard="auth")</p>
<div class="subnav">
<a href="/profile" aura-router-link>Overview</a>
<a href="/profile/settings" aura-router-link>Settings</a>
<a href="/profile" data-aura-link>Overview</a>
<a href="/profile/settings" data-aura-link>Settings</a>
<button type="button" data-demo-logout>Log out</button>
</div>
<aura-outlet></aura-outlet>
Expand All @@ -56,7 +56,7 @@ <h1>About</h1>
<div class="main">
<h1>404</h1>
<p>Route not found (path="*").</p>
<p><a href="/" aura-router-link>Home</a></p>
<p><a href="/" data-aura-link>Home</a></p>
</div>
</template>

Expand Down
4 changes: 2 additions & 2 deletions playground/pages/profile.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<h2>Profile</h2>
<p class="hint">requires login (guard="auth")</p>
<div class="subnav">
<a href="/profile" aura-router-link>Overview</a>
<a href="/profile/settings" aura-router-link>Settings</a>
<a href="/profile" data-aura-link>Overview</a>
<a href="/profile/settings" data-aura-link>Settings</a>
<button type="button" data-demo-logout>Log out</button>
</div>
<aura-outlet>
Expand Down
6 changes: 3 additions & 3 deletions playground/pages/users.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ <h1>Users</h1>
<p>List from the server (<code>view="users"</code>). Nested layout: <code>aura-router-ssr</code> on shell;
flat leaf-only markup → no full adopt (cold fetch / structure-error).</p>
<ul>
<li><a href="/users/1" aura-router-link>User 1</a></li>
<li><a href="/users/2" aura-router-link>User 2</a></li>
<li><a href="/users/3" aura-router-link>User 3</a></li>
<li><a href="/users/1" data-aura-link>User 1</a></li>
<li><a href="/users/2" data-aura-link>User 2</a></li>
<li><a href="/users/3" data-aura-link>User 3</a></li>
</ul>
</div>
</aura-outlet>
Expand Down
6 changes: 3 additions & 3 deletions public/features/animations/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
</div>

<nav class="demo-links demo-site-nav" aria-label="Навигация">
<a href="/features/animations" aura-router-link>Обзор</a>
<a href="/features/animations/a" aura-router-link>Страница A</a>
<a href="/features/animations/b" aura-router-link>Страница B</a>
<a href="/features/animations" data-aura-link>Обзор</a>
<a href="/features/animations/a" data-aura-link>Страница A</a>
<a href="/features/animations/b" data-aura-link>Страница B</a>
</nav>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions public/features/animations/intro.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ <h2>transition-order</h2>
</ul>
<p>Текущий режим: <code data-demo-param="transition-order">parallel</code></p>
<nav class="demo-links">
<a href="/features/animations/a" aura-router-link>Страница A</a>
<a href="/features/animations/b" aura-router-link>Страница B</a>
<a href="/features/animations/a" data-aura-link>Страница A</a>
<a href="/features/animations/b" data-aura-link>Страница B</a>
</nav>

<div class="demo-code-window">
Expand All @@ -37,8 +37,8 @@ <h2>transition-order</h2>
<h2>Хук fade</h2>
<p>Core не содержит встроенных анимаций — только фазы pipeline и staged mount. Хук <code>fade</code> анимирует <code>[data-aura-view-root]</code> на фазах <code>transitionOut</code> / <code>transitionIn</code>. При <code>prefers-reduced-motion</code> анимация пропускается.</p>
<nav class="demo-links">
<a href="/features/animations/a" aura-router-link>Страница A</a>
<a href="/features/animations/b" aura-router-link>Страница B</a>
<a href="/features/animations/a" data-aura-link>Страница A</a>
<a href="/features/animations/b" data-aura-link>Страница B</a>
</nav>
<p class="demo-hint">Смените порядок на панели, затем несколько раз переключитесь A ↔ B — шапка и URL-бар остаются, меняется только timing перехода.</p>
</article>
4 changes: 2 additions & 2 deletions public/features/animations/page-a.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ <h1>Страница A</h1>
</div>

<nav class="demo-links">
<a href="/features/animations/b" aura-router-link>Страница B</a>
<a href="/features/animations" aura-router-link>Обзор</a>
<a href="/features/animations/b" data-aura-link>Страница B</a>
<a href="/features/animations" data-aura-link>Обзор</a>
</nav>
</article>
4 changes: 2 additions & 2 deletions public/features/animations/page-b.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ <h1>Страница B</h1>
</div>

<nav class="demo-links">
<a href="/features/animations/a" aura-router-link>Страница A</a>
<a href="/features/animations" aura-router-link>Обзор</a>
<a href="/features/animations/a" data-aura-link>Страница A</a>
<a href="/features/animations" data-aura-link>Обзор</a>
</nav>

<p class="demo-hint">Кнопка «Назад» в браузере вернёт страницу A с той же анимацией выхода.</p>
Expand Down
2 changes: 1 addition & 1 deletion public/features/hydration/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@ <h1>About</h1>
</p>

<nav class="demo-links">
<a href="/features/hydration/b" aura-router-link>Страница B →</a>
<a href="/features/hydration/b" data-aura-link>Страница B →</a>
</nav>
</article>
6 changes: 3 additions & 3 deletions public/features/hydration/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
<code id="demo-site-url" aria-live="polite"></code>
</div>
<nav class="demo-links demo-site-nav" aria-label="Навигация">
<a href="/features/hydration" aura-router-link>About (hydrate)</a>
<a href="/features/hydration/b" aura-router-link>Страница B</a>
<a href="/features/hydration" data-aura-link>About (hydrate)</a>
<a href="/features/hydration/b" data-aura-link>Страница B</a>
</nav>
</div>

Expand Down Expand Up @@ -78,7 +78,7 @@ <h1>About</h1>
</template>

<nav class="demo-links">
<a href="/features/hydration/b" aura-router-link>Страница B →</a>
<a href="/features/hydration/b" data-aura-link>Страница B →</a>
</nav>
</article>
</div>
Expand Down
2 changes: 1 addition & 1 deletion public/features/hydration/page-b.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ <h1>Страница B</h1>
</p>

<nav class="demo-links">
<a href="/features/hydration" aura-router-link>← About</a>
<a href="/features/hydration" data-aura-link>← About</a>
</nav>
</article>
10 changes: 5 additions & 5 deletions public/features/phase-update/hash.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ <h1>Hash — якорь</h1>
<p>Активный якорь: <code>#<span data-demo-param="section">—</span></code></p>

<nav class="demo-links">
<a href="/features/phase-update/hash#one" aura-router-link>#one</a>
<a href="/features/phase-update/hash#two" aura-router-link>#two</a>
<a href="/features/phase-update/hash#three" aura-router-link>#three</a>
<a href="/features/phase-update/hash#one" data-aura-link>#one</a>
<a href="/features/phase-update/hash#two" data-aura-link>#two</a>
<a href="/features/phase-update/hash#three" data-aura-link>#three</a>
</nav>

<p class="demo-hint">Переключайте якоря: view не remount-ится, обновляются только URL и scroll.</p>
Expand All @@ -22,8 +22,8 @@ <h1>Hash — якорь</h1>
<template id="phase-update-hash-code">
<aura-route path="/features/phase-update/hash" view="features/phase-update/hash.html"></aura-route>

<a href="/features/phase-update/hash#one" aura-router-link>#one</a>
<a href="/features/phase-update/hash#two" aura-router-link>#two</a>
<a href="/features/phase-update/hash#one" data-aura-link>#one</a>
<a href="/features/phase-update/hash#two" data-aura-link>#two</a>
</template>

<section id="one" class="demo-hash-section">
Expand Down
10 changes: 5 additions & 5 deletions public/features/phase-update/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
<code id="demo-site-url" aria-live="polite"></code>
</div>
<nav class="demo-links demo-site-nav" aria-label="Сценарии update">
<a href="/features/phase-update" aura-router-link>Обзор</a>
<a href="/features/phase-update/search?tab=info" aura-router-link>Search</a>
<a href="/features/phase-update/hash#one" aura-router-link>Hash</a>
<a href="/features/phase-update/remount/1" aura-router-link>:id remount</a>
<a href="/features/phase-update/update/1" aura-router-link>param-update</a>
<a href="/features/phase-update" data-aura-link>Обзор</a>
<a href="/features/phase-update/search?tab=info" data-aura-link>Search</a>
<a href="/features/phase-update/hash#one" data-aura-link>Hash</a>
<a href="/features/phase-update/remount/1" data-aura-link>:id remount</a>
<a href="/features/phase-update/update/1" data-aura-link>param-update</a>
</nav>
</div>

Expand Down
Loading
Loading