# Getting started
{% hint style="info" %}
**Bundler note:** These examples import '.html' files as raw strings (showing '?raw' for Vite/esbuild). Configure your bundler as described in [Importing external HTML templates with bundlers](https://docs.aurelia.io/components/components#importing-external-html-templates-with-bundlers) so the imports resolve to strings on Webpack, Parcel, etc.
{% endhint %}
Routing with Aurelia feels like a natural part of the framework. It can easily be implemented into your applications in a way that feels familiar if you have worked with other frameworks and library routers. Here is a basic example of routing in an Aurelia application using `router`.
The following getting started guide assumes you have an Aurelia application already created. If not, [consult our Quick Start](https://docs.aurelia.io/getting-started/quick-install-guide) to get Aurelia installed in minutes.
## Installation
```bash
npm i @aurelia/router
```
## Configure the `router`
To use the `router`, we have to register it with Aurelia. We do this at the bootstrapping phase.
{% code title="main.ts" %}
```typescript
import Aurelia from 'aurelia';
import { RouterConfiguration } from '@aurelia/router';
import { MyApp } from './my-app';
Aurelia
.register(RouterConfiguration.customize({
useUrlFragmentHash: true, // <-- enables the routing using the URL `hash`
}))
.app(MyApp)
.start();
```
{% endcode %}
{% hint style="info" %}
To know more about the different configuration options for router, please refer the [documentation](https://docs.aurelia.io/getting-to-know-aurelia/aurelia-router/fundamentals/router-configuration) on that topic.
{% endhint %}
## Create the routable components
For this example, we have a root component which is `MyApp`. And then we are going to define two routes for the root component, namely `home` and `about`.
Let us define these components first.
{% tabs %}
{% tab title="home.ts" %}
```typescript
import { customElement } from '@aurelia/runtime-html';
import template from './home.html?raw';
@customElement({ name: 'ho-me', template })
export class Home {
private readonly message: string = 'Welcome to Aurelia2 router!';
}
```
{% endtab %}
{% tab title="home.html" %}
```html
```
{% endtab %}
{% endtabs %}
## Configure the routes
With the routable components in place, let's define the routes. To this end, we need to add the route configurations to our root component `MyApp`.
{% tabs %}
{% tab title="my-app.ts" %}
```typescript
import { customElement } from '@aurelia/runtime-html';
import { route } from '@aurelia/router';
import template from './my-app.html?raw';
import { Home } from './home';
import { About } from './about';
@route({
routes: [
{
path: ['', 'home'],
component: Home,
title: 'Home',
},
{
path: 'about',
component: About,
title: 'About',
},
],
})
@customElement({ name: 'my-app', template })
export class MyApp {}
```
{% endtab %}
{% tab title="my-app.html" %}
```html
```
{% endtab %}
{% endtabs %}
There are couple of stuffs to note here. We start by looking at the configurations defined using the `@route` decorator where we list out the routes under the `routes` property in the configuration object in the `@route` decorator. The most important things in every route configurations are the `path` and the `component` properties. This instructs the router to use the defined `component` in the viewport when it sees the associated `path`.
{% hint style="info" %}
To know more about configuring routes, please refer to the respective [documentation](https://docs.aurelia.io/getting-to-know-aurelia/aurelia-router/fundamentals/configuring-routes).
{% endhint %}
The viewport is specified in the view (see `my-app.html`) by using the `` custom element. For example, the router will use this element to display the `Home` component when it sees the `/` (the empty path) or the `/home` paths.
The `nav>a` elements are added to navigate from one view to another.
See this in action:
{% embed url="" %}
## Using pushstate
If you have opened the demo then you can notice that the URL in the address bar or the URLs in the `nav>a` elements contains a `#` (example: `/#home`, `/#about` etc.). Depending on your project need and esthetics you may want to get rid of the `#`-character. To this end, you need set the [`useUrlFragmentHash` to `false`](https://docs.aurelia.io/getting-to-know-aurelia/aurelia-router/router-configuration#choose-between-hash-and-pushstate-routing-using-useurlfragmenthash), which is also the default.
## Live examples
For the documentation of router, many live examples are prepared. It is recommended to use the live examples as you read along the documentation. However, if you are feeling adventurous enough to explore the features by yourself, here is the complete [collection of the live examples](https://stackblitz.com/@Sayan751/collections/router-lite) at your disposal.
{% hint style="info" %}
The examples are created using StackBlitz. Sometimes, you need to open the examples in a new tab to see changes in the URL, title etc. To this end, copy the URL appearing on the address bar on the right pane and open that in a new tab.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.aurelia.io/getting-to-know-aurelia/aurelia-router/fundamentals/getting-started.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.