mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-02 04:40:41 +08:00
7b4f5cbd6a
* docs: add guide for routing in Svelte * chore: add svelte routing guide example change to changelog --------- Co-authored-by: Lea Anthony <lea.anthony@gmail.com>
69 lines
1.6 KiB
Plaintext
69 lines
1.6 KiB
Plaintext
# Routing
|
|
|
|
Routing is a popular way to switch views in an application. This page offers some guidance around how to do that.
|
|
|
|
## Vue
|
|
|
|
The recommended approach for routing in Vue is [Hash Mode](https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode):
|
|
|
|
```js
|
|
import { createRouter, createWebHashHistory } from "vue-router";
|
|
|
|
const router = createRouter({
|
|
history: createWebHashHistory(),
|
|
routes: [
|
|
//...
|
|
],
|
|
});
|
|
```
|
|
|
|
## Angular
|
|
|
|
The recommended approach for routing in Angular is [HashLocationStrategy](https://codecraft.tv/courses/angular/routing/routing-strategies#_hashlocationstrategy):
|
|
|
|
```ts
|
|
RouterModule.forRoot(routes, { useHash: true });
|
|
```
|
|
|
|
## React
|
|
|
|
The recommended approach for routing in React is [HashRouter](https://reactrouter.com/en/main/router-components/hash-router):
|
|
|
|
```jsx
|
|
import { HashRouter, Routes, Route } from "react-router-dom";
|
|
|
|
ReactDOM.render(
|
|
<HashRouter basename={"/"}>
|
|
{/* The rest of your app goes here */}
|
|
<Routes>
|
|
<Route path="/" element={<Page0 />} exact />
|
|
<Route path="/page1" element={<Page1 />} />
|
|
<Route path="/page2" element={<Page2 />} />
|
|
{/* more... */}
|
|
</Routes>
|
|
</HashRouter>,
|
|
root
|
|
);
|
|
```
|
|
|
|
## Svelte
|
|
|
|
The recommended approach for routing in Svelte is [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router):
|
|
|
|
```svelte
|
|
<script>
|
|
import Router from "svelte-spa-router";
|
|
</script>
|
|
|
|
<Router
|
|
routes={{
|
|
"/": Home,
|
|
"/products": wrap({
|
|
asyncComponent: () => import("./routes/Products.svelte"),
|
|
}),
|
|
"/settings": Settings,
|
|
"*": NotFound,
|
|
}}
|
|
/>
|
|
```
|