> The value for `open` can be a string including the window specs, e.g. `width=400,height=200` — a `on:close` event will be fired once the opened window is closed.

Normal `on:click` events are still allowed, so you can use:

```html
location.reload()}>Reload
```

> Active _links_ will gain the `[aria-current]` attribute, and `[disabled]` if they're buttons.

Aditionally, you can setup `go` to move around:

- `"back"` — String; if given, will invoke `history.back()`
- `"fwd"` — String; if given, will invoke `history.fwd()`
- `n` — Number; if given, it'll be used to invoke `history.go(n)`

> If navigating through `history` is not possible a normal redirection will run. :anchor:

## Public API

- `navigateTo(path[, options])` — Change the location, supported options are:
- `reload` — If true, it will use `document.location.href` instead
- `replace` — If true, it will use `history.replaceState()` instead
- `params` — Used to replace `:placeholders` from given path
- `queryParams` — Additional search-params for the new location
- `$router` — Store with shared routeInfo details, similar to `let:router`

> `yrv` gracefully degrades to `location.hash` on environments where `history` is not suitable, also it can be forced through `router.hashchange = true`.

### Route Info

Route changes are propagated through stores, if you want to listen too just subscribe, e.g.

```js
import { router } from 'yrv';

router.subscribe(e => {
if (!e.initial) console.log(e);
});
```

Using this technique you gain access to the same detail object as `let:router` does.

> Notice the `initial` property is present as soon the store is initialized, consecutive changes will not have it anymore.

### IE11 support

Support for IE11 is _granted_ if you include, at least, the following polyfills before your application:

```html
if (!!window.MSInputMethodContext && !!document.documentMode)
document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Promise,Object.getOwnPropertyDescriptors"><\/script>');

```

> `document.write()` is used because conditional comments were dropped in IE10, so this way you can conditionally load polyfills anyway.

Also, you MUST [enable either `buble` or `babel`](https://github.com/sveltejs/svelte/issues/2621) within your build pipeline to transpile down to ES5.

### Frequently Asked Questions

**How to conditionally render a `` component?**

Both Route/Router components support the `disabled` and `condition` props, but:

- Use `condition` to allow/disallow route-dispatching dynamically
- Use `disabled` to skip from rendering, it will add/remove the route

This new `disabled` prop would work as you're expecting:

```html

...

```

**What means the `exact` property and how it works?**

Say you have three routes:

- `/a` (exact)
- `/a/b` (non-exact)
- `/a/b/c` (exact)

Now, you navigate from `/a` to `/a/b/c`:

- Since `/a` was active, and it was exact, `yrv` clears out the `routeInfo` for that route.
- Since `/a/b` is not exact, `yrv` activate this route because is half-way to the final route.

> If you plan to have more routes nested, then the route will never be `exact` (at least at top-levels).

This is also true for `` components — as soon as they match the `[aria-current]` attribute will be added on them to denote _active_ links.

If the link for `/a` were also `exact`, then it'll be _active_ if the matching route is `/a` only.

**Why `path` can't be an empty string like other routers does?**

Even if browsers treat `http://localhost:8080` and `http://localhost:8080/` as the same thing I wanted to keep paths clear as possible.

Internally `yrv` normalizes any given URI to keep a trailing slash, so `/foo` is `/foo/` for matching purposes.

Also, the default path is usually `/` so there's no point on having to declare anything else:

```html
OK
OK
```

**What is `routeInfo` and how can I access it outside routes?**

This object is very similar to what you get with `let:router` inside components.

Use the `$router` store to access it, e.g.

```html

import { router } from 'yrv';

{JSON.stringify($router, null, 2)}

**Why does Yrv not work with Parcel or webpack/snowpack?**

If you're getting any of the errors below:

- store.subscribe is not a function
- Class constructor SvelteComponent cannot be invoked without 'new'
- 'on_outro' is not exported by [...]
- 'target' is a required option

Make sure you're using the right settings:

1. Add mainFields into resolve config, e.g. `mainFields: ['svelte', 'browser', 'module', 'main']`
2. Remove `exclude: /node_modules/` from `svelte-loader` config

> If you're using an online tool that is not the official Svelte REPL the behavior is unexpected and no further support will be granted.

**Can I use hash-based routes _à la_ Gmail? e.g. `index.html#/profile`, `index.html#/book/42`?**

Yes, URIs like that are suitable for embedded apps like Electron, where normal URLs would fail.

Also this mode is the default used on the Svelte REPL, because is not an iframe, nor a regular webpage... it's a weird thing!

> If you enable `router.hashchange = true` all your regular links will be automatically rewritten to hash-based URIs instead, see how it works in our test suite.

**Why I'm getting ` was created with unknown prop 'router'` in the browser's console?**

If you're not using the `router` prop inside your route-components then just add:

```html

export const router = null;

```

That will remove the warning and also will make `eslint-plugin-svelte3` in your workflow happy.

**Why `router.subscribe` is called two times when I first open the page?**

Any subscription to stores will fire twice as they have an initial value, once the router resolves (e.g. the initial route) then a second event is fired.

> In this case, and additional property `initial` is added to identify such event.

**Is there any method that allows me to detect route change?**

Yes, you can subscribe to the router store, e.g. `router.subscribe(...)` — [see above](#route-info).

**Is there a way to reduce the bundle size of yrv?**

Since `v0.0.46` you'll be getting the most reduced version we can ship, however it comes without development warnings.