Svelte篇：Svelte路由与导航
最新回答
薄荷凉我心
2026-02-24 22:50:23
svelte-spa-router
安装 svelte-spa-router
首先，你需要安装 svelte-spa-router。在项目目录中运行以下命令：
npm install svelte-spa-router
配置路由
接下来，你可以在你的主应用组件（通常是 App.svelte）中配置路由。首先，导入 Router 和 Route 组件。
<!-- App.svelte --><script> import { Router, Route } from 'svelte-spa-router'; import Home from './Home.svelte'; import About from './About.svelte'; import Contact from './Contact.svelte';</script><Router> <Route path="/" view={Home} /> <Route path="/about" view={About} /> <Route path="/contact" view={Contact} /></Router>
导航链接
为了在应用内部进行导航，你可以使用 Link 组件，它也是 svelte-spa-router 提供的。
<!-- Navigation.svelte --><script> import { Link } from 'svelte-spa-router';</script><nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul></nav>
路由守卫
svelte-spa-router 支持路由守卫，可以用来在路由切换前执行某些逻辑，比如身份验证。
<!-- App.svelte --><script> import { Router, Route, before } from 'svelte-spa-router'; import Home from './Home.svelte'; import About from './About.svelte'; import Contact from './Contact.svelte'; before((to, from, next) => { // Check authentication status here if (!isAuthenticated()) { next('/login'); } else { next(); } });</script><Router> <Route path="/" view={Home} /> <Route path="/about" view={About} /> <Route path="/contact" view={Contact} /></Router>
动态路由
svelte-spa-router 也支持动态路由，这意味着你可以捕获 URL 中的部分路径作为参数。
<!-- App.svelte --><script> import { Router, Route } from 'svelte-spa-router'; import Post from './Post.svelte';</script><Router> <Route path="/post/:id" view={Post} /></Router><!-- Post.svelte --><script> export let id;</script><article> <h1>Post #{id}</h1></article>
在 Post.svelte 中，id 变量将自动填充从 URL 中捕获的值。
嵌套路由
你也可以实现嵌套路由，即在某个路由下有多个子路由。
<!-- App.svelte --><script> import { Router, Route } from 'svelte-spa-router'; import Dashboard from './Dashboard.svelte'; import User from './User.svelte';</script><Router> <Route path="/dashboard" view={Dashboard}> <Route path="/dashboard/user/:id" view={User} /> </Route></Router>
routify
routify 是另一个流行的 Svelte 路由库，它提供了更高级的路由功能，如自动路由生成和嵌套路由。
安装 routify
npm install @roxi/routify
配置 routify
routify 使用文件系统路由，这意味着你的文件结构将决定你的路由结构。
src/ routes/ index.svelte about.svelte contact.svelte
导航链接
使用 routify 的 Link 组件进行导航。
<!-- Navigation.svelte --><script> import { url } from '@roxi/routify';</script><nav> <ul> <li><a href={$url('/')}>Home</a></li> <li><a href={$url('/about')}>About</a></li> <li><a href={$url('/contact')}>Contact</a></li> </ul></nav>
svelte-routing
svelte-routing 是另一个轻量级的路由库，适合简单的 Svelte 应用。
安装 svelte-routing
npm install svelte-routing
配置 svelte-routing
<!-- App.svelte --><script> import { Router, Route, Link } from 'svelte-routing'; import Home from './Home.svelte'; import About from './About.svelte'; import Contact from './Contact.svelte';</script><Router> <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> <Link to="/contact">Contact</Link> </nav> <Route path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /></Router>
总结
在 Svelte 应用中，路由和导航是实现单页面应用的关键。虽然 Svelte 没有内置的路由库，但社区提供了多个高质量的第三方库，如 svelte-spa-router、routify 和 svelte-routing，它们提供了丰富的功能来满足不同的路由需求。选择合适的路由库取决于你的项目需求和个人偏好。
热门标签
