Comments (9)
See also #26
Yes that is probably the best way. The router will not do that for you as we cannot make assumptions about your app.
from svelte-spa-router.
Thank you!
from svelte-spa-router.
From some experimenting, this quickfix works great for forward navigations but it breaks history and back navigation (since navigating backwards will run that page's onMount). I believe the cleanest implementation would need routing library support to restore stored positions on back navigation. See the same discussion with angular's route: angular/angular#7791 and angular/angular#6946.
The defaults they later decided on preserves scroll position on back navigation and scroll to top on forward navigation (which is a sensible default for a routing library since it matches the default behaviour of browsers).
I'm about to try something similar as their implementation https://github.com/angular/angular/pull/20030/files . Will update if I get anywhere.
from svelte-spa-router.
The problem with that approach is that it would be quite hard to implement here.
The router has no concept of history stack, and it can’t have, so there’s no way we can know if this is a forward navigation or backwards. We could maintain a stack of all visited pages in memory, but even there we wouldn’t be able to know if the navigation is forward or backward (eg page that links back to the previous page as a forward navigation). It also wouldn’t survive a refresh of the page.
If this is something that’s very important to you, it should be implementable in the app layer. The new “routeLoaded” event introduced in 1.3 should make this easier too, as it doesn’t require creating an on amount in every component.
from svelte-spa-router.
Feel free to take a look, small changes. This works great for my use case (still haven't handled push
, pop
, replace
yet, probably will once I need it).
Tried to make things semi-releasable, at very least others might find this useful.
Some things to look at would be to somehow make back navigation not flash if there's lots of content to load (maybe fade the page in etc).
from svelte-spa-router.
@ItalyPaleAle, I understand what you say about few features that work good.
Your hint to use the new routeLoaded
is great and I'm using it right now.
But is a bit DRY if used in many <Router>
components in my app.
Look here: https://github.com/vikignt/svelte-ui/blob/master/example/src/main.js#L25-L30.
They use page.js
and forEach
route they have a func()
.
Maybe an idea?
from svelte-spa-router.
I'm sorry, I'm wrong.
Your routeLoaded
works for every underlying route. My fault.
from svelte-spa-router.
But perhaps, now that I think about it, this is another the problem.
How to use it only for some <Router>
components?
from svelte-spa-router.
from svelte-spa-router.
Related Issues (20)
- a11y warnings HOT 1
- Active links - allow duplicate classes
- In vite, i can't use the proxy /dev HOT 1
- Redirection from route pre-condition HOT 5
- Nested routes as maps HOT 1
- If I want to go to the login page in the sidebar + SPA form, is it possible with route guard? HOT 4
- Is this not possible in routeLoaded? HOT 5
- What is the black bar in this image? HOT 2
- Feature request: Svelte 4 support HOT 13
- FEATURE REQUEST: pass next() in precondition to decide whether the router should *change* the current route HOT 1
- Load user data HOT 4
- How to check hash-bashed history HOT 1
- Is there an alternative to the "Failed to fetch dynamically import problem" issue in Vite + Svelte spa environment? HOT 1
- WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte. [email protected] HOT 8
- Typescript problematic types after "wrapping" the route HOT 2
- navigating within same component does not work HOT 5
- Typescript support: Package path ./wrap is not exported from package svelte-spa-router HOT 2
- Will the library support Svelte 5? HOT 5
- Authentication and Authorization HOT 6
- Layouts not exists for svelte-spa-router? HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-spa-router.