Closed SazzadR closed 6 years ago
Hi @SazzadR
Thanks for posting the issue. scrollBehavior
works with history
mode only in vue router https://router.vuejs.org/en/advanced/scroll-behavior.html
Note: this feature only works if the browser supports history.pushState.
So you have to use mode: 'history'
in the vue router options in order to make it work
I am already using history
mode, but it still won't working. Here is my route initialization. My chrome
version is Version 66.0.3359.181 (Official Build) (64-bit)
import Vue from 'vue';
import routes from './routes';
import Router from 'vue-router';
Vue.use(Router);
const router = createRouter();
export default router
function createRouter() {
const router = new Router({
mode: 'history',
routes,
linkActiveClass: 'active'
});
return router
}
Scroll behavior should work in V2 both for history
and non history mode now.
scrollBehavior: (to, from, savedPosition) => {
if (to.hash) {
return {selector: to.hash}
} else {
return { x: 0, y: 0 }
}
}
If you don't have access to v2, let me know your username from creativetim and I will add it to your account @SazzadR
I couldn't get any of the above solutions working, and it was really frustrating.
What ended up working for me was the below:
const router = new Router({
mode: 'history',
routes: [...],
scrollBehavior() {
document.getElementById('app').scrollIntoView();
}
})
I mount my VueJs app to #app so i can be certain it is present its available for selection.
I use vue-material-dashboard-pro 1.2.0. None of the above solutions work for me? Any update?
This should make it work
export default new Router({
mode: 'history',
scrollBehavior(to, from, savedPosition) {
// This works only with the history mode
console.log(to, from, savedPosition)
return { x: ..., y: ... }
// Or return the savedPosition
},
routes: [ ... ]
})
I can't get the scrollBehavior to work with vue-material either. Not sure why this is closed!
Hi, @alexvenetis! The solution is here for this issue and is working!
Regards, Dragos
Hi, @alexvenetis! The solution is here for this issue and is working!
Regards, Dragos
I've tried all the solutions here, but nothing seems to work.
I think the problem I am facing is because I am using the vue-material app setup.
The outer app stays at position 0, 0. So, the scrollBehavior setting the app to 0, 0 has no effect. Its the inner app content that is scrolled down and not re-scrolling to the top.
Hi, @alexvenetis! Unfortunately, here the problem is related to vue paper dashboard pro, not the material dashboard.
Regards, Dragos
I am using
vue-paper-dashboard-pro
version 1.1.0. Here I cannot manage to work vue's nativescrollBehavior
properly. Here is my code inmain.js
file:I have haven't change any other part of template.