文章目录
- 安装项目
- 路由
- 动态路由(摘自官网)
- 参数校验
- 路由动画效果
- 全局过渡
- 局部过渡
- 路由守卫(全局、局部)
- 异步数据
- Promise方式
- 插件
- Layers
- 中间件 - middleware
- Vuex状态树
- API(这里只说一些关键的API)
- asyncData
- 关键的一些包
- nuxt/axios
我们这里先学习一下Nuxt2,日后再学习Nuxt3
安装项目
npx create-nuxt-app <项目名>
路由
Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置
也就是说我们直接配置就可以了,page结构对应页面结构
我们在pages目录下,我们可以看到在.next目录下,有相关的路由文件生成,这里是nuxt直接帮我们做的
动态路由(摘自官网)
在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录
Nuxt.js 生成对应的路由配置表为
router: {routes: [{name: 'index',path: '/',component: 'pages/index.vue'},{name: 'users-id',path: '/users/:id?',component: 'pages/users/_id.vue'},{name: 'slug',path: '/:slug',component: 'pages/_slug/index.vue'},{name: 'slug-comments',path: '/:slug/comments',component: 'pages/_slug/comments.vue'}]
}
参数校验
Nuxt.js 提供了一个校验参数的方法validate
export default {validate({ params }) {// 必须是number类型return /^\d+$/.test(params.id)}
}
路由动画效果
全局过渡
我们找到配置的公共的css样式,里面添加两种配置
在nuxt.config.js配置文件中,这个地方指定了配置文件
module.exports = {css:['@/assets/gobal.css']
}
.page-enter-active{}
.page-leave-active{}
局部过渡
路由守卫(全局、局部)
异步数据
Nuxt.js 提供了asyncData的方法,使得我们可以设置组件的数据之前能异步获取或处理数据
Nuxt.js 有多种调用asyncData的方式
Promise方式
export default {asyncData({ params }) {return axios.get(`https://my-api/posts/${params.id}`).then(res => {return { title: res.data.title } // 相当于data中的数据,可以{{}}进行调用})}
}
插件
nuxt 根目录下有一个plugins文件夹,这里就是平常存放插件的文件目录,然后通过nuxt.config.js中plugins配置,就可以使用插件了
Nuxt.js 允许您在运行 Vue.js 应用程序之前执行 js 插件。这在您需要使用自己的库或第三方模块时特别有用。
Layers
中间件 - middleware
Vuex状态树
API(这里只说一些关键的API)
asyncData
nuxt.js 允许在组件渲染之前进行异步获取数据
- 在服务端渲染期间,asyncData方法会在组件实例化之前被调用,以确保在渲染HTML之前获取到数据
- 在客户端渲染期间,asyncData方法会在路由参数发生变化时被调用,以确保切换路由时获取到最新的数据
因此,asyncData方法可以在服务端和客户端两个环境中获取数据,并且可以确保在组件渲染之前获取数据,从而保证了页面的性能和可访问性
关键的一些包
nuxt/axios
本人另一篇博客(Nuxt.js - nuxt/axios)