[vuejs/vue-router]在上面的路由中增加isEventChange属性判断是事件改变的路由还是调用方法改变的路由

这个功能解决了什么问题？

有时候需要知道是否是用户主动调用改变方法的路由还是点击导航栏或者左滑返回改变的路由，以处理动画效果，比如ios上面用户左滑返回上一个路由，需要在beforeEach里面判断是调用方法触发的还是hashchange或者popstate事件触发的，来处理要不要拥有返回动画，如果是左滑返回的话就不用做动画效果了

提议的 API 是什么样的？

router.beforeEach((to, from, next) => {
  if (to.isEventChange) {
    // 不处理动画 
  } else {
    // 处理返回动画
  }
})

agileago

您是否正在寻求一种方法来了解该操作是否来自用户操作？

posva

是的

agileago

抱歉，我的意思是该操作是否来自单击某处。如果导航是从 a 或类似的调用的，则可能会添加一些标志，push但我不确定这是否非常可靠，因为使用next应该删除此标志，但有些人可能期望拥有它。目前，它在用户态中仍然可行，因为作为开发人员，您最了解操作的来源

posva

只有浏览器触发路由器更改才应添加此道具。因为 vue-router 处理路由器事件。我认为它应该适用于vue-router

agileago

您能否举一些例子以便更好地理解？？

posva

iOS左滑后退

当您在路由器视图中进行转换时。你应该判断该行为是back或forward。像这样

<template>
  <div>
    <h2>transition router-view</h2>
    <transition :name="viewTransition" :css="!isEventChange">
       <router-view />
    </transition>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        viewTransition: 'forward',
        isEventChange: false
      }
    }
  }
</script>

当您单击浏览器后退导航器时。你应该做一个向后过渡。但是当你向左滑动时用手向后滑动。你不想在中进行转换router-view。迄今为止。我们使用覆盖路由器方法来破解这个问题。但这并不是一个完美的解决方案。

参见示例 https://vux.li/demos/v2/?x-page=v2-doc-home #/

代码解决方案 https://github.com/airyland/vux/blob/v2/src/main.js#L147

agileago

那么，您只需要知道是否popstate用于导航？ (#14)

posva

几乎。我不需要知道方向。只是想知道路由器的变化是event change或user change (by click or js)。但hachchange也应该处理相同的行为

agileago

但是 vue-router 无法猜测该操作是否来自用户操作？

posva

当然 vue-router 可以做到。等一下。我会做一个公关。

agileago

如果是打补丁push和其他方法，那是不够的。从功能上来说，你想要实现的功能是什么？

posva

我只知道路由器的更改是通过用户单击浏览器导航器（包括ios向后滑动）或通过路由器方法执行（推送，前进，前进，后退，替换，包括路由器链接）

agileago

这个问题有新进展了吗？@ @agileago

h330894169

同问，这个问题有进展了吗？

cqgsm

isEventChange为什么不自己添加道具呢？

luckymore

同问，这个问题有进展了吗？

icefee

在 vue-router 中无法知道该操作是否来自用户操作。甚至不确定在所有情况下是否在用户态中都可能，但在特定情况下应该是可能的

posva

[vuejs/vue-router]在上面的路由中增加isEventChange属性判断是事件改变的路由还是调用方法改变的路由

回答

相关问题