nuxt---04---过渡效果和asyncData学习

最新推荐文章于 2024-08-22 14:49:51 发布

原创最新推荐文章于 2024-08-22 14:49:51 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #nuxt.js

nuxt服务端渲染框架专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Nuxt.js项目中实现页面间的过渡效果，并详细解释了asyncData方法的使用方式，包括其如何帮助开发者在组件初始化前异步获取数据。

页面之间跳转的过渡效果添加：

1.全局过渡效果:

在全局的css文件里面添加如下样式代码（类名是固定的）

.page-enter-active{
  color:pink;
  transition: all 3s;
}
.page-enter, .page-leave-active{
  color: blue;
}

2.针对单个页面跳转添加特定的过渡效果

在pages下面的某个视图组件里面添加：

export default {
  transition: 'test'
}

在全局或局部的css文件中添加如下样式代码：

.test-enter-active, .test-leave-active {
  transition: all 2s;
  color: red;

}
.test-enter, .test-leave-active {
  opacity: 0;
  color: blue;
}

asyncData

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
注意：由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象

asyncData方法会在页面组件每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合到当前组件的data中。

<script>
import axios from 'axios'
export default {
  async asyncData (context) {
    let {data} = await axios('http://localhost:9999/api/get_test_list')
    return {info: data}
  }
} 
</script>

关于asyncData方法的上下文对象的这个参数说明请参考：

https://www.nuxtjs.cn/api/context