Skip to content

wmzy/svelte-router

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svelte-router Build Status

This is svelte-router which works only with svelte 3.0.

Introduction

svelte-router is a router for svelte.js. It was forked from vue-router.And has the similar APIs and features:

  • Nested route/view mapping
  • Modular, component-based router configuration
  • Route params, query, wildcards
  • View transition effects powered by svelte.js' transition system
  • Fine-grained navigation control (in-component-guards is not support now)
  • Links with automatic active CSS classes
  • HTML5 history mode or hash mode, with auto-fallback in IE9
  • Customizable Scroll Behavior

Get started with the vue-router documentation, or play with the examples (see how to run them below).

Install

npm i @svel/router

Usage

<script>
import {HistoryRouter, RouterProvider, RouterLink, RouterView} from '@svel/router'
import Home from '../views/Home.svelte'
import Foo from '../views/Foo.svelte'
import Bar from '../views/Bar.svelte'

const router = new HistoryRouter({
  base: '/',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
});
</script>

<RouterProvider {router}>
  <div id="app">
    <h1>Svelte Router</h1>
    <ul>
      <li><RouterLink to="/">/</RouterLink></li>
      <li><RouterLink to="/foo">/foo</RouterLink></li>
      <li><RouterLink to="/bar">/bar</RouterLink></li>
    </ul>
    <RouterView />
  </div>
</RouterProvider>

Development Setup

# install deps
npm install

# build dist files
npm run build

# serve examples at localhost:8080
npm run dev

# lint & run all tests
npm test

# serve docs at localhost:8080
npm run docs

Releasing

  • npm run release
    • Ensure tests are passing npm test
    • Build dist files VERSION=<the_version> npm run build
    • Build changelog npm run changelod
    • Commit dist files git add dist CHANGELOG.md && git commit -m "[build $VERSION]"
    • Publish a new version `npm version $VERSION --message "[release] $VERSION"
    • Push tags git push origin refs/tags/v$VERSION && git push
    • Publish to npm npm publish

Contribution

Please make sure to read the Contributing Guide before making a pull request.

Changelog

Details changes for each release are documented in the release notes.

License

MIT

Copyright (c) 2013-present Evan You

About

🚦 A router for Svelte.js.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.2%
  • TypeScript 2.4%
  • Shell 0.4%