svt-router

svt-loader

• a tiny and strong hash router for svelte but idea can be for any front-end project
• you can handle your web page as you want

requirements

• svelte with webpack

install

npm install svt-router --save-dev

how to use

very simple：

• declare your page routes in routes.js

import Detail from "@/pages/Detail"
import List from "@/pages/List"
export default [
    {
        path: "/",
        component: async () => await import('@/pages/Welcome'),
    },
    {
        path: "/welcome",
        component: () => import('@/pages/Welcome')
    },
    {
        path: "/home",
        component: import('@/pages/Home')
    },
    {
        path: "/detail",
        component: () => Detail
    },
    {
        path: "/list/:id",
        component: List
    },
]

• init routes by svt-router in main.js

import routes from "./routes"
import SvtRouter, { init } from "./SvtRouter"
init(routes)

• mount SvtRouter into dom in main.js

let app = new SvtRouter({
    target: document.getElementById("app"),
})

api

• init(cfgs)
  • cfgs must be an array you see in example
  • used for initializing routes and create first route
  • must be called before create app
• push({ data, title, path })
  • inner call window.history.pushState
  • push a route info routeStack
  • match route by path and update curRoute
  • refresh page by curRoute
• replace({ data, title, path })
  • inner call window.history.replaceState
  • pop a route from routeStack
  • match route by path and update curRoute
  • refresh page by curRoute
• back()
  • just like window.history.back()

directions

• temporarily, not supported neested route、 keepalive feature like in vue-router
• component in route supports some types as you see above
• path can support params

{
    path: "/list/:id",
    component: List
}

• one component can be matched by path's array

{
    path: ["/special/:tag", "/special/café/:tag"],
    component: Special
}

• arguments for function push、replace,data、title just can be ignored
• you can pass a path like

push({path:'/home'})
push({path:'#/home'})
push({path:'/home?name=aaa'})
push({path:'/list/666?name=bbb'})

• you can read route params like

$$props.params

example

npm run dev