NuxtJS 基本使用

一、初始化NuxtJS项目

这里我们手动来初始化一个NuxtJS项目，方便理解。具体官方文档参照：nextJS官方文档
首先先创建一个文件夹可以取名为 NuxtJS_demo，并在此文件夹下执行以下命令 ：

npm init -y
npm install nuxt

此时我们的文件夹中会生成package.json文件，这时候我们可以把package.json文件中的scripts添加一个执行dev指令如：

{
  "name": "NuxtJS_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nuxt"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "nuxt": "^2.14.10"
  }
}

这样我们可以通过npm run dev来启动这个nuxtJS。然后我们在此文件夹下创建一个pages目录并在里面新建一个index.vue，这里面主要放nuxtJS要执行的页面组件和路由。index.vue内容如下：

<template>
    <div>
        <h1>Hello NuxtJS!</h1>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

这时候我们可以在终端中运行npm run dev启动我们的服务。启动完成后可以在默认的localhost:3000上看到我们的页面：

这样，简单的初始化项目就完成了。

二、路由

1、基本路由

其实nuxt路由就是基于vue路由去实现的，只不过它将结构形象化到pages目录下了，利用pages的目录结构和组件重命名等来实现路由的架构。比如，pages目录结构为这样：

那么实际的路由结构就是这样的：

pages目录结构搭建完成后可通过path路径去访问到相应的组件页面。

2、路由导航

路由导航的方式有三种，与vue-router用法完全一致：
1.通过a标签导航。（它会刷新整个页面，不推荐使用）
2.通过nuxt-link组件导航。（与vue的router-link几乎一致）
3.编程式导航。（通过js代码进行导航）
具体使用情况如下：

<template>
    <div>
        <h1>Hello NuxtJS!</h1>
        <!-- 通过a标签导航 -->
        <a href="/users">跳转到users__a</a>
        <!-- 通过nuxt-link组件导航 -->
        <nuxt-link to="/users">跳转到users</nuxt-link>
        <!-- 编程式导航 -->
        <button @click="routeHandle">跳转到users</button>
    </div>
</template>

<script>
export default {
    name: "home",
    methods: {
        routeHandle () {
            this.$router.push('/users') // 编程式导航
        }
    }
}
</script>

<style>

</style>

3、动态路由

nuxtJS中 定义动态路由则是直接往文件名前面加下划线，即 “_”。用法：

4.嵌套路由

嵌套路由需要借助nuxt-child组件来实现，其实原理与vue的route-view几乎一致。在pages目录的结构上要注意：

可以看到，嵌套路由需要用相同的名称来规范父子路由，将子路由的文件夹目录与父路由的组件文件名同名，则可实现嵌套路由。然后在父路由中放入nuxt-child来展示子路由页面：

<template>
    <div>
        <h1>users 父路由</h1>
        <!-- 子路由出口 -->
        <nuxt-child />
    </div>
</template>

<script>
export default {
    name: "users"
}
</script>

<style>

</style>

最后访问结果：

5.自定义路由配置

想要自定义配置路由，需要现在根目录上创建一个 nuxt.config.js 的配置文件，nuxtJS会根据这个配置文件中的配置信息来自动配置我们的服务器和项目相关的内容。例如在配置文件中写入：

/**
 * Nuxt.js配置文件
 */

module.exports = {
    router: {
        base: '/abc', // 创建到服务器的哪个文件夹下
        /**
         * 扩展路由
         * @param {Array} routes 一个数组，路由配置表，也就是我们项目的路由列表
         * @param {Function} resolve 解析路由组件路径
         */
        extendRoutes (routes, resolve) {
            routes.push({
                path: '/hello',
                name: 'hello',
                component: resolve(__dirname, 'pages/hello.vue')
            })
        }
    }
}

这样就可以将/abc作为我们项目的根目录，并且扩展一个hello的路由。我们可以来访问一下：

具体还有很多可配置的api，可查看官方文档获取：nuxtJS 官方文档

6.asyncData

基本用法：
1.NuxtJS会将asyncData返回的数据融合组件data方法返回的数据一并给组件；
2.调用时机：两个时机，服务端渲染期间和客户端路由更新之前。
注意事项:
1.只能在页面组件中使用；（只能在pages下面的组件中使用）
2.没有this，因为它是在组件初始化之前被调用的。

<template>
    <div>
        <h1>Hello NuxtJS!</h1>
        <!-- 通过a标签导航 -->
        <a href="/users">跳转到users__a</a>
        <!-- 通过nuxt-link组件导航 -->
        <nuxt-link to="/users">跳转到users</nuxt-link>
        <!-- 编程式导航 -->
        <button @click="routeHandle">跳转到users</button>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: "home",
    methods: {
        routeHandle () {
            this.$router.push('/users') // 编程式导航
        }
    },
    data () {
        return {
            foo: 'bar'
        }
    },
    async asyncData (context) {
    	// context参数就是当前页面的上下文对象，可以从这里拿到需要的一些参数
        const res = await axios({
            url: 'http://localhost:3000/data.json',
            method: 'GET'
        })
        return res.data;
    }
}
</script>

<style>

</style>