Nuxt2快速上手（一）路由、异步数据、中间件等

我们这里先学习一下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）

nuxt.config.js 常用的一些配置