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 };
}
},
});
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'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
i'm making static site with laravel and vue.js. I make
Route::get('/', function () {
return view('layouts.master');
});
this route enter code hereto load home page and
import VueRouter from 'vue-router'
import home from './components/home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/about', component: About },
{
path: '/',
component: home
},
{
path: '/contact',
component: Contact
}
]
const router = new VueRouter({
mode: 'history',
routes, // short for `routes: routes`,
})
its my appp.js code. First time when page loaded on localhost:8000 the home page works fine but when i click to somme other route and come back it does not work it shows me blank page . but i can see html page by inspecting.
It sounds like history mode is not configured correctly on the server side.
As a test, change this:
const router = new VueRouter({
mode: 'history',
routes, // short for `routes: routes`,
})
...to this:
const router = new VueRouter({
//mode: 'history',
routes, // short for `routes: routes`,
})
If it works, it means your server side is not set up properly for Vue History Mode and you'll need to configure your server side to allow for history mode.
Example 1
Example 2 - scroll down a little more than half way to "The Server-Side" section
I have a route which shows after a user has completed a payment, say at the /success URL. How would I make that someone can't simply go to example.com/success and see the success screen. Instead, it should only be accessed by running this.$router.go('/success/'); in code.
Thanks
Take a look at Navigation Guards.
You can add a beforeEnter to the route which you can use to check if the user should access the page.
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
You can do this with router navigation guards, in particular in-component guards. By defining the beforeRouteEnter, you can check (for example) the store, to see if data associated with payments is defined.
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.