svelte-navaid

KO | EN

gitlite — search

#python #hacktoberfest #llm #go #deep-learning #linux #docker #macos #java #awesome #cli #vue #pytorch #ios

(★ 18)

A Svelte router powered by https://github.com/lukeed/navaid/

svelte-navaid Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# svelte-navaid

Navaid-based routing components for Svelte. Does not work with Sapper. Yet. I don’t think. Contributions welcome.

## Getting Started

```bash
npm i --save svelte-navaid
```

```svelte
<script>
  import Router from 'svelte-navaid/Router.svelte';
  import Route from 'svelte-navaid/Route.svelte';
  import Link from 'svelte-navaid/Link.svelte';
  import SomeComponent from './SomeComponent.svelte';
</script>

<Router>
  <h1>Hello World!</h1>

<Route path="/foo/*">
    <h2>Foo</h2>

<Router>

<Link href="sub1">Sub 1</Link> | <Link href="/sub2">Sub 2</Link>

</Router>
  </Route>

<Route path="/bar" component={SomeComponent} myProperty={someValue}/>

<Route path="/things/:id" let:params>
    The ID is: {params.id}
  </Route>

<Route>
    <h2>Page Not Found</h2>
  </Route>
</Router>
```

Use hash-based routing for single-page apps that are hosted on a server which doesn't support it.

```svelte
<script>
  import Router from 'svelte-navaid/Router.svelte';
  import Route from 'svelte-navaid/Route.svelte';
  import Link from 'svelte-navaid/Link.svelte';
  import navaidHash from 'svelte-navaid/navaid-hash';
</script>

<Router library={navaidHash}>
  <h1>Hello World!</h1>

<Link href="/">Home</Link> | <Link href="foo/sub1">Foo</Link> | <Link href="/bar?abc=def">Bar</Link>

<Router>

<Link href="sub1">Sub 1</Link> | <Link href="/sub2">Sub 2</Link>

</Router>
  </Route>

<Route path="/bar">
    <h2>bar</h2>
  </Route>
</Router>
```

Navigate to paths programmatically. The first 2 options are recommended because they will use the context of the router.
This allows using the path relative to the nearest router vs the whole application. Be sure to start the URL with `/` to
get the intended result.

```svelte
<script>
  import Router from 'svelte-navaid/Router.svelte';
  import Route from 'svelte-navaid/Route.svelte';

let navigate;
</script>

<Router bind:navigate>
  <h1>Hello World!</h1>

<Route path="/">
    <button on:click={() => navigate('/bar')}>Go To Bar</button>
  </Route>

<Route path="/bar">
    <button on:click={() => navigate('/')}>Go Home</button>
  </Route>
</Router>
```

```svelte
<script>
  import { getContext } from 'svelte';

const navigate = getContext('navigate');
</script>

<button on:click={() => navigate('/bar')}>Go To Bar</button>
```

When using the following method, you must use the full path, even if within nested routes (e.g. "/blog/articles/23"). It
does not know the base URL. If using the hash library this method will also require you use the hash (e.g. "#/blog/articles/23").
If you write your components using one of the previous two methods, they will be more portable and maintainable.

```svelte
<script>
  import { navigate } from 'svelte-navaid';
</script>

<button on:click={() => navigate('/bar')}>Go To Bar</button>
```

## Testing

```bash
npm run dev
```

This will start a server where you can view a simple demo app which shows off the router and its features.

svelte-navaid

svelte-navaid Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

svelte-navaid

svelte-navaid Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README