I would like to check the to and from of the route path with scrollBehavior to manage the scroll behaviour.
global.router = new VueRouter({
routes,
scrollBehavior(to, from, savedPosition) {
console.log('>>> to', to);
console.log('>>> from', from);
switch (to.path) {
case '/in-list':
break;
case '/your-list':
break;
default:
return {x: 0, y: 0}
}
},
mode: 'history',
});
Suppose, I navigate from About page to the In-List or Your-list page, I would like to return {x: 0, y: 0}. However, when navigating between In-list or Your-list I would like no such behaviour.
However, both to and from return the same path. They both return the to.path so I cannot check where it was navigated from. What am I missing here?
Okay, so the problem was with my version. I was using ^2.2.1 and upgraded to the latest version 2.7.0. However, this issue was fixed in version 2.3.1.
I saw the issue in the closed issues of Vue-router. Hope this will help some one.
Related
I am trying to make Nuxt change routes and appear at the top of the new route, but without seeing it scrolling.
Right now it's either saving the last position, or it's changing the route while scrolling.
I don't want to see the page scrolling.
Setting this code in nuxt.config does nothing:
router: {
saveScrollPosition: false
}
Setting this code in app/router.scrollBehavior.js scrolls to top visibly:
export default function (to, from, savedPosition) {
return { x: 0, y: 0 }
}
Nuxt version 2.15.8
Vue version 2.7.10
I say production, but it's running locally in a docker container. My backend is Django.
I'm having a little trouble with my vue app. submitting a form, or refreshing the page results in a 404 error. My data gets posted, but I have to go back to the beginning and navigate back to see my page. My searching led me to believe that using
history: createWebHistory()
might solve my problem, but the result is the same.
My /router/index.js:
...
{
path: '/dashboard/users/:id',
name: 'Users',
component: Users,
meta: {
requireLogin: true
}
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireLogin) && !store.state.isAuthenticated) {
next('/log-in')
} else {
next()
}
})
export default router
Lots of topic seem to involve netify, or apache, of which I'm running neither. Any direction is appreciated.
It sounds like you may be missing a catch-all route in your router configuration. Without seeing your full router configuration, it's hard to say for sure, but something like this might work:
{
path: '*',
component: NotFound
}
This will catch any routes that don't match any of your other routes, and render the NotFound component.
I'm implementing an paginated list. Therefore I'm using query parameters like ?size=10. This query paramter needs to be always inside my URL (like /home?size=2).
This apporach is not working:
const routes = [{ path: "/home", query: { size: "10" }, components: MyPage }];
const router = createRouter({
history: createWebHistory(),
routes,
});
I thought it is instantiating the route with some parameters. Looking into the Routing section of vue devtools shows me an empty query object:
$route:/home
fullPath:"/home"
path:"/home
query:Object (empty)
hash:""
name:undefined
params:Object (empty)
matched:Array[0]
meta:Object (empty)
redirectedFrom:undefined
href:"/home
How can I set a default query param to my route?
Here is a proposal using the beforeEach NavigationGuard:
const routes = [{ path: "/home", name: "Home", components: MyPage }];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from) => {
if(to.name === "Home" && !to.query.hasOwnProperty("size")){
to.query.size = "10"
}
})
The idea is to add to the route a default query parameter for size when it is not there.
The only way to achieve this properly without defining the default value in every router.push() is probably with Navigation Gurads. You can use them to get the query-parameters that are currently in the url, add the default query-params you need and then return the new route.
Though I would not do it, this is probably the easiest way to achieve this.
And if you want to make them customizable via pinia/vuex you would need to set up a store and make a user input to change the setting.
Note: Pinia is most likely the better option, because it is newer and will still be supported far in the future
For reasons I can't figure out the Y-value of the savedPosition never goes over 2000, even though window.pageYOffset reports me the correct Y-value if I ask it just before I push a new route.
console.log(window.pageYOffset) // tells me: 4233
this.$router.push({params:{id:newId}})
Hit backbutton.. router:
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: (to, from, savedPosition) => {
console.log('scrollBehavior',savedPosition) // tells me: 1557
}
routes: [ ... ]
}
The savedPositon seems to fluctuate beteen 1500 and 2000px, regardless how deep I am in the page. The window.pageYOffset always gives me the correct value.
I've tried returning a promise to wait a few seconds before scrolling, but that doesn't matter. If anyone has any idea's why this is or how to fix it, great, otherwise, somehow getting this window.pageYOffset value in the scrollBehavior would also be acceptable.
Also this concerns vue-router 3.x.. I'm migrating to vue-router 4.x in a few months time. So ideally it works in both or in 4.x only.
I'm trying to remember scroll position between routing pushes, NOT browser back/fwd navigation.
Case: on a long page of products, scrolling down and clicking on one of the items to see its details, then clicking a "back to list" button with a router push and (in my dreams) returning to where I was scrolled to on the product page.
This is my router. All the docs just give this basic config, but it doesn't work for me and I'm not sure if I need to add other logic in other components. Do I need to to save a 'savedPosition' in the state then get and set it in the router?
I'm also using beforeEach navigation guards but there isn't any scroll logic in there.
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
scrollBehavior(to, from, savedPosition) {
console.log("savedPosition", savedPosition);
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
},
});