@roadhog/svelte-router

Svelte Router

基于配置的 Svelte 路由

使用

<script lang="ts">
  import {currentRoute} from '@roadhog/svelte-router'
  import { router } from '../router';
  router.replace('/users');
  router.push('/users');
  router.push('/users/1');
  router.push({ path: '/users/:id', params: { id: 123 } });
  router.push({ path: '/users/:id', params: { id: 123 }, query: { action: 'push' } });
  router.back();
  router.forward();
  router.go(-1);
  $:console.log('currentRoute', $currentRoute)
</script>

router.ts

import { createHashHistory } from '@roadhog/svelte-router';
import Home from './pages/home.svelte';
import Users from './pages/users.svelte';
import User from './pages/user.svelte';

export const router = createHashHistory({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/users',
      name: 'Users',
      component: Users,
    },
    {
      path: '/users/:id',
      name: 'User',
      component: User,
    },
  ],
});

App.svelte

<script lang="ts">
  import { RouterProvider, hashChange } from '@roadhog/svelte-router';
  import { router } from './router';

  hashChange(({ currentRoute, action }) => {
    console.log(action, '当前路由->', currentRoute);
  });
</script>

<RouterProvider {router}>
  <div>这是404页面</div>
</RouterProvider>