本文共 1417 字,大约阅读时间需要 4 分钟。
开发中,如果需要组件之间切换时,有切换效果,可以使用“过渡动画”
切换:离开状态、进入状态
步骤一:编写css,确定动画效果
//内部规定 .*-enter-active, .*-leave-active 用于设置进入或离开动画效果// page 表示默认过渡效果.page-enter-active, .page-leave-active { transition: opacity .5s;}.page-enter, .page-leave-active { opacity: 0;}
module.exports = { css: [ 'assets/main.css' ]}
错误页面:用于定制个性化错误页面。例如:404如何显示、500如何显示等
编写错误页面,需要2步骤:
目前位置,我们一共学习了几种处理错误信息nuxt相关知识点
知识点1:路由中默认路由,只能解决404问题。(如果路由都不能匹配,将执行默认路由)
~/pages/_.vue
知识点2:布局中错误页面,可以解决所有错误问题,更加强大, 可以处理任意的statusCode
~/layouts/error.vue
额外属性 | 描述 |
---|---|
asyncData | nuxt服务端发送ajax区域 |
fetch | 页面渲染之前发送ajax区域,一般用于填充vuex |
head | 用于配置页面的头信息 |
layout | 用于配置布局 |
使用head属性可以设置页面标题、引入外部css文件、引入外部js文件 等
转载地址:http://ufbef.baihongyu.com/