vue-router的go(-1)可以存在两个动画吗

Question

现在我像课程里的一样在App.vue里弄的返回动画，但是go(-1)不能携带参数，无法指定第二种后退动画。想问下老师能不能实现多种后退动画

Answer 1

Sunday 2020-07-16 10:45:58

你好：

如果是这个问题的话，那种重点应该是思路。

试想以下，思路应该是什么？

首先明确以下目的。我们的目的是，当执行后退操作的时候，可以根据需求，展示不同类型的后退动画。

那么为了这个目的，我们需要有：

1、执行后退操作，这个可以通过 go(-1) 实现

2、根据需要，展示不同类型的后退动画。这个需要让“动画执行者”知道我应该执行什么动画。

所谓的难点就在第二步。

那么怎么做呢？你可以参考下，你上一个问题，我提到的 “第三方”的思路。我们可以不可以，再 vuex 中声明一个变量，这个变量用来表示当前应该执行哪一种后退动画。

再执行 go(-1) 之前，我们修改该变量，在“动画执行者”执行动画之前，我们根据该变量判断应该执行哪一种后退动画。

你上面的回答，也可以实现该效果。是没有问题的。

• 提问者 wambaoxiaoyiyi #1

  非常感谢！

• 提问者 wambaoxiaoyiyi #2

  老师，我用vuex时，总是觉得各个不同的功能模块需要用到的变量，统统放在一个文件里不太方便，看着vuex里面的变量，很难想象他们在程序的哪个地方被使用。也许vuex变量像全局变量，全局变量总是给人不好的印象，所以我使用vuex的优先级比较低，并且总是想找到代替它的方法。

• 提问者 wambaoxiaoyiyi #3

  我觉得vuex是一种很暴力的解决方法，老师您怎么看

点开查看后面1条评论

Answer 2

提问者 wambaoxiaoyiyi 2020-07-13 16:53:42

    目前解决方法是router中绑定一个goBack方法

VueRouter.prototype.goBack = function () {

  this.isBack = true

  window.history.go(-1)

}

在App.vue文件watch $router时，判断this.$router.isBack的值来决定播放哪个动画