vue 路由器滚动行为提示路由值答案

【问题标题】：vue router scroll behavior give hint to route valuesvue 路由器滚动行为提示路由值
【发布时间】：2020-03-02 10:45:04
【问题描述】：

我有一条可以有以下参数和查询的路由：

父路由：path: "/:locale(en|jp)?" 产品路线：path: 'products/:category/:page?' 产品中的查询可以是：

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

应用示例为here

我的问题是，当我更改尺寸、颜色或设计师时，我想从 scrollBehavior 返回 savedPosition，在任何其他情况下，它都会返回 {x:0,y:0}

有没有办法做到这一点，而不检查来自 to 和 from 的所有查询值，并使 scrollBehavior 函数不必要地臃肿，而是在从设置颜色、大小或设计器的函数推送路由时传递一个提示？

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

为了不必在 scrollBehavior 中创建复杂的逻辑，我只是让它不断返回 {x:0,Y:0} 并创建了以下函数：

export const pushRoute = (route, component, keepScrollPosition = true) => {
  const pos = {
    top: window.scrollY,
    left: window.scrollX,
  };
  component.$router.push(route);

  if (keepScrollPosition) {
    Promise.resolve().then(
      () => { window.scrollTo(pos); },
    );
  }
};

在我的组件中，我用以下方式调用它：

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

【讨论】：