I would like my app to keep the same scrolling position when navigating back to one of my routes. It is working if I navigate back using the back button of my browser but when I click on a link (created with nuxt-link) the scroll position resets to 0 when navigating to my route.
I tried replacing the scrollBehavior function in nuxt.config.js with my own. The function is called but the savedPosition parameter is null so it's obviously the reason why the scroll position is reset. Again, if I use the back button of my browser instead of clicking a link from an other route, then there is no problem, the savedPosition parameter is set to its expected value and the scrolling happens. I don't understand why it doesn't work when navigating with a link and what I can do to solve this. Any help would be appreciated.
I believe the reason this is happening is that nuxt-link is pushing a new page onto the back stack.
With that in mind, scrollBehaviour is being called with a null savedPosition parameter because this is a brand new page. This is analogous to calling router.push() when doing programmatic navigation.
I wasn't able to find any method of emulating the back button behaviour strictly using nuxt-link, but it's simple to implement using programmatic navigation:
// go backward one page
router.go(-1)
Related
I have a StackNavigator, and I have a screen for creating new content on my app. Once the content is created I push to the screen for the content. At this point I can still create new content from that screen, so it's possible to push a new create content screen. But if the user does a GO_BACK, or swipes i.e. POPs back, I want them to skip the previous create content screen.
I think it's fairly common behaviour where you want to selectively skip screens on the way back. I've looked at the docs to try and figure this out. The easiest looking fix was the auth-flow. That skips the screen going back, but it also stops you pushing the screen if you take it out of the navigator.
The current best approach I have is to use a custom stack router, and in getStateForAction remove the create content screen from the routes whenever the user is pushing away from it. The downside on this is that there's a janky animation on iOS pushes from the create content screen, as the create content screen is sliding out it's also sliding up (I guess because it's being removed).
Is there a recommended best way to do this?
On the previous create screen use navigation.replace("ScreenName", {params})
It looks like Vuejs is automatically scrolling to the top of a page when you push the back button, which is weird because by default the window doesnt even scroll to the top when you change route in a SPA or go to a new page. You need to explicitly set scrollBehaviour to scroll to the top. So how can we prevent the page automatically scrolling to the top when you press the back button.
beforeRouteLeave (to, from, next) {
alert('Are you sure you want to leave this page and lose unsaved changes')
// Notice how the page automatically scrolls to the top here even if the user were to response 'No' in a dialog situation
}
Heres a code pen of the problem
https://codepen.io/anon/pen/bOGqVP
Browser back button scroll to top is defined by browser. Aparently we can disable that behaviour by adding this line of code
window.history.scrollRestoration = "manual"
Adding this code will tell browser that we handle the scroll.
I only test this in your codepen. Need testing in other browser
Working on a car dealership site and playing with vue router.
The issue currently is that I have a homepage with a grid of vehicle, when clicking to view one on its own page I have to wait for the random parts to load in ,which causes page height jumps etc.
Is there a way I can trigger the view to load a method but only change the route and view when I say to (api has returned a response)?
On YouTube for example, you click a link and get the progress bar before the view changes.
Thanks.
The issue with your page height jump could be resolved by this.
As for pre-loading the data, you can use the beforeRouteEnter() function, here.
i am stuck in a problem that is,
in my application one screen has a Tabbar component so i have used Tabnavigation from react-navigation.
so there is two tabs in that screen and both of that tabs have GET API for displaying data
so my main problem is when tab screen is open at that time both tabs file is calling API because of tabnavigator is in stack navigator.
So please help me to solve this issue.
i have to do like this::-
when i click on tab then after API will be call but here when the screen is arrive at that time both tabs call their API.
so please sort out this issue guys.
You can use TabNavigator's lazy prop.
lazy - Whether to lazily render tabs as needed as opposed to rendering them upfront.
This way your API call will happen only when you switch to that tab. The call will happen only on first switch though. You may need to add some logic to recall API on certain event or time to get the new data.
Is there any way to prevent the default back button behavior in the navigation bar of a navigationview?
I'm trying to use Sencha Touch 2 history and linking abilities with routers, but that requires me to essentially intercept all button taps so that I can update the url.
The back button in a navigation bar creates all kinds of nightmares as far as thats concerned, and I can supply code if someone thinks they have an alternate solution, but preventing the default back button behavior seems best (so as to play nice with browser back button)
If you want to handle back button you can use back event of navigation view which fired when the back button of the navigation view was tapped.. Refer to my previous answer on how to do it.
If you want to completely hide the back button just simply use:
Ext.select('.x-button-back').hide();
try this Ext.getCmp('navigationview's id').getNavigatorBar().hide()