Enhance your Vue router's scroll behavior with tips on navigating route values

Question

Enhance your Vue router's scroll behavior with tips on navigating route values

I am working on a route that includes various parameters and queries:

For the parent route: path: "/:locale(en|jp)?" And for the products route:

path: 'products/:category/:page?'

The query in product may include:

{
  q: search string for filtering,
  size: size value for filtering,
  color: color value for filtering,
  designer: designer value for filtering,
  sort: sorting value
}

An example of the application can be viewed here

My question pertains to changing the size, color, or designer, where I would like to return savedPosition from scrollBehavior. In all other cases, it should return {x:0,y:0}

I am wondering if there is a way to achieve this without having to check all query values from to and from within the scrollBehavior function, as it could unnecessarily complicate things. Instead, is it possible to pass a hint when pushing the route from the function that sets the color, size, or designer?

javascript vue.js vue-router

Answer 1

Answer №1

In order to simplify the logic in scrollBehavior, I made it return {x:0, y:0} repeatedly and came up with the following function:

const changeRoute = (route, component, maintainScrollPosition = true) => {
  const position = {
    top: window.scrollY,
    left: window.scrollX,
  };
  component.$router.push(route);

  if (maintainScrollPosition) {
    Promise.resolve().then(
      () => { window.scrollTo(position); },
    );
  }
};

I trigger this function from my component like so:

changeRoute(
  {
    ...this.$route,
    query,
  }, this, true,
);

Answer 2

In order to simplify the logic in scrollBehavior, I made it return {x:0, y:0} repeatedly and came up with the following function:

const changeRoute = (route, component, maintainScrollPosition = true) => {
  const position = {
    top: window.scrollY,
    left: window.scrollX,
  };
  component.$router.push(route);

  if (maintainScrollPosition) {
    Promise.resolve().then(
      () => { window.scrollTo(position); },
    );
  }
};

I trigger this function from my component like so:

changeRoute(
  {
    ...this.$route,
    query,
  }, this, true,
);

Enhance your Vue router's scroll behavior with tips on navigating route values

Answer №1

Similar questions

The toggle button for columns is not triggering the callback action

Issue with date and time range in SQL query when using PHP AJAX

Encountering a 500 internal server error after deploying due to utilizing getServerSideProps in Next.js

Is there a different way to retrieve data in Node.js instead of using mysqli

Using a loop to execute Javascript Promise.all()

Is there a viable substitute for websockets that can be utilized on shared hosting platforms?

The manipulation of Analytics with artificial pageviews is altering the source of traffic for PPC campaigns

Experiencing a problem with loading scenes on a splash screen using WebGL and three.js

Unlocking bundles of worth through javascript coding

HTML forms default values preset

Troubleshooting Failures in RequireJs Optimization for Windows

The strict-origin-when-cross-origin policy is enforced when submitting a POST request through a form to a specific route

Preventing default form submission in jQuery: How to cancel it when a certain condition is met

VueJs has the ability to display/render a single object from a collection of hundreds of objects at a time

Validating Presence of a Value in an Array Object Using AngularJS

What is the best way to clear radio button selections in a form using reactjs?

Instafeed running on Ionic/AngularJS is unable to reach the scope

Cloning jQuery with varied PHP array value

javascript: extracting class name from HTML elements

How can I use Vue.js @scroll to create a dynamic CSS property?