### Install alpinejs-router via npm Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Installs the alpinejs-router package using npm. ```bash npm install @shaun/alpinejs-router ``` -------------------------------- ### Route Matching Examples with Params Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Illustrates various route patterns with params and their corresponding matched paths and `$router.params` output. ```markdown | pattern | matched path | $router.params | | --- | --- | --- | | /users/:username | /users/eduardo | `{ username: 'eduardo' }` | | /users/:username/posts/:postId | /users/eduardo/posts/123 | `{ username: 'eduardo', postId: '123' }` | ``` -------------------------------- ### Install alpinejs-router via yarn Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Installs the alpinejs-router package using yarn. ```bash yarn add @shaun/alpinejs-router ``` -------------------------------- ### External Template Content Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Example of content for an external template file (`somewhere.html`) used with alpinejs-router. ```html
Content...
``` -------------------------------- ### Basic Routing with Alpine.js Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Demonstrates basic declarative routing using `x-link` for navigation and `x-route` for defining routes with and without external templates. ```html Hello World Load template ``` -------------------------------- ### Router Navigation Methods Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Demonstrates using the `$router.push` and `$router.replace` methods for programmatic navigation. It also shows how to resolve URLs with query parameters and configure router base paths. ```html ``` ```html ``` ```html ``` ```html Page 2/10 ``` -------------------------------- ### Declarative vs Programmatic Navigation Comparison Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Compares declarative navigation using `x-link` and `x-link.replace` with their programmatic equivalents `$router.push` and `$router.replace`. ```markdown | Declarative | Programmatic | | --- | --- | | `` | `$router.push(...)` | ``` ```markdown | Declarative | Programmatic | | --- | --- | | `` | `$router.replace('...')` | ``` -------------------------------- ### Router Configuration with Base Path and Mode Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Illustrates configuring the router with different modes ('web', 'hash') and base paths. This allows for setting up routing prefixes and defining the URL structure. ```html ... ``` ```html ... ``` ```html ... ``` ```html ... ``` ```html ... ``` -------------------------------- ### Programmatic Navigation with $router.push Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Explains how to programmatically navigate to a different URL using the `$router.push` method, which adds a new entry to the browser's history stack. ```javascript $router.push('...') // This is the method called internally when you click a `x-link`, so clicking `` is the equivalent of calling `$router.push(...)`. ``` -------------------------------- ### Include alpinejs-router via CDN (ES5) Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Includes the alpinejs-router library using a CDN link for older browsers that support ES5. ```html ``` -------------------------------- ### Displaying Router Properties Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Shows how to display current route information using magic properties like `$router.path`, `$router.query`, `$router.params`, and `$router.loading`. ```html ``` ```html ``` ```html ``` ```html Separate template file is loading ``` -------------------------------- ### Include alpinejs-router via CDN (ES Module) Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Includes the alpinejs-router library using a CDN link for ES module compatible browsers. ```html ``` -------------------------------- ### Navigation Links with x-link Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Creates navigation links using the `x-link` directive. It supports basic navigation, replacing the history entry, and applying active/exact-active classes for styling. ```html ... ``` ```html ... ``` ```html ... ``` ```html ... ``` -------------------------------- ### Dynamic Route Matching with Params Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Shows how to define routes with dynamic segments (params) using a colon and access them via `$router.params`. ```html ``` ```html
User ID:
``` -------------------------------- ### Configure Router: HTML5 Mode Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Sets the router to use HTML5 history API for navigation, resulting in 'normal' URLs. This mode requires server-side configuration to handle direct access to routes by serving the main index.html for all non-static asset requests. ```html ``` ```html ``` -------------------------------- ### Declare Routes with x-route Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Defines routes using the `x-route` directive. It can directly include content or specify a separate HTML template file using the `template` attribute. Preloading templates is also supported. ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` -------------------------------- ### Configure Router: Hash Mode Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Sets the router to use hash-based navigation. This mode uses a '#' in the URL and is simpler for server configuration but can negatively impact SEO. ```html ``` -------------------------------- ### Custom Regex in Route Params Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Demonstrates how to use custom regular expressions within route params to differentiate matching criteria. ```html ``` ```html ``` -------------------------------- ### Route Matching Directives Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Provides directives to conditionally show or process elements based on the current route. `$router.is` checks for a specific route, while `$router.not` checks if the current route does not match. ```html
You can see me
``` ```html ``` ```html
...
``` -------------------------------- ### Programmatic Navigation with $router.replace Source: https://github.com/shaunlee/alpinejs-router/blob/dev/README.md Details how to programmatically replace the current history entry using `$router.replace`, preventing a new entry from being added to the history stack. ```javascript $router.replace('...') ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.