异步请求后调用“ nuxt-link”行为

Question

我是nuxt.js的新手，并使用此框架构建了我的第一个应用程序。

我想在页面之间使用过渡。我知道我可以通过使用<nuxt-link>标签来实现。但是，我希望在发送成功的异步ajax（在这种情况下为登录）请求之后发生这种情况。

因此，对于我来说，我想在成功登录后链接到另一个页面，同时还要显示页面之间的过渡。

当我使用默认的javascript方法时，它不会显示过渡： window.location.href = '...'

谢谢！

Answer 1

查看vue-router文档的this部分，了解如何进行程序化导航。在Nuxt中，路由器自动连接到组件，并且可以使用this.$router进行访问。

类似的事情会起作用

// Other Vue properties omitted
methods: {
    async login() {
        await loginUser()

        this.$router.push('/..')
    }
}

Answer 2

签出Official Vue Router documentation

如前所述，您应该使用：

router.push('another')

所以，在nuxt

this.$router.push('another')

请记住，您必须使用例如不透明度来定义页面之间的过渡。 （如官方文档所述）

.page-enter-active,
.page-leave-active {
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: .5s;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}