nuxt.js 的使用

之前我们已经知道到了如何使用 nuxt.js 去创建一个项目，并且也知道里面有哪些文件，都有什么作用，现在我们就来用一下这个框架

首先我们要知道项目的启动文件是：server/index.js，

并且我们写组件页面的文件夹是：pages

接下来我们就在 pages 文件夹下写一个组件页面
1：在 pages 下新创建一个目录（mypages，可以自己取名字)(主要是想让主组件在最外面，明显一点)
2：在mypages 下创建一个组件页面 index.vue，在里面书写如下代码

<template>
    <div>
        <h1>我是一个单组件</h1>
    </div>
</template>

然后我们让这个项目跑起来，在地址栏中输入：http://localhost:3000/mypage， 就能看到我们新创的页面
在这里我们要注意到，我们并没有去书写路由，但是我们还是能访问到这个界面，这是因为nuxt.js 会帮我们自动的生成路由的映射表，只要我们按照他的规定去操作
我们把上面那种路由：域名 + 端口 + 相对路径（相对于pages文件夹） 组成的路由叫做基础路由
还有两种路由：动态路由和路由嵌套

动态路由

nuxt.js 提供了链接导航

1：在 mypage 文件夹下新创建一个文件 必须以 _开始：_id.vue
2：在里面书写代码

<template>
    <div>
        <h2>我是路由 {{ $route.params.id }}</h2>
    </div>
</template>

3：然后我们去到当前文件夹下的 index,js 设置链接跳转

<template>
    <div>
        <h1>我是一个单组件</h1>
        <nuxt-link to="/mypage/1">新闻一</nuxt-link>
        <nuxt-link to="/mypage/2">新闻一</nuxt-link>
        <nuxt-link to="/mypage/3">新闻一</nuxt-link>
    </div>
</template>

注意：动态路由的文件_后面是什么，$route.params后面就是什么，这是要一一对应的

路由嵌套

1:我们将直接写在pages文件夹下的文件当做父级组件，取名：goods.vue，编写代码

<template>
    <div>
      <h2>我是一级路由</h2>
      <hr />
      //下面放置我的子路由
      <nuxt-child />
      //子路由里面的内容会将 <nuxt-child /> 替换
    </div>
</template>

2:创建一个与goods.vue同级的目录:goods(这个文件夹的名称必须和父级组件一样)，里面创建子组件list.vue

<template>
    <h3>嗨，我是子路由的内容</h3>
</template>

3:当我们访问http://localhost:3000/goods/list,就会看到子组件的内容了

layout/default:公共组件书写

<template>
  <div>
//在这里书写的代码会出现在每个页面

      <nuxt /> //pages 里的组件会替换这里

  </div>
</template>

异步请求数据：asyncData

在 nuxt.js 有一个生命周期函数：asyncData，用来发送网络请求的（可以理解为 created ，页面加载就会执行）

<script>
    import axios from 'axios';

    export default {
        name: "movie",
        //asyncData:异步请求数据函数，发送网络请求，可看做 created 生命周期函数
        asyncData: function(context){
            // console.log(context.req);//请求头
            // console.log(context.res);//响应头
            // console.log(process.server);//可以标识当前运行环境：ssr 为 true
            //现在我们来请求一下一个电影列表的数据
           
            var url = 'https://movie.52kfw.cn/index.php/Api/Movie/alst';
            return axios.get(url).then(response=>{
                if(response.status === 200 && response.data.error_code === 0){

                    console.log(response.data.result);

                    return { movieData: response.data.result }
                    //它就相当于
                    /*
                    * data: function () {
                        return {
                            movieData: response.data.result
                      }
                    }
                    * */
                }

            }).catch(error=>{
                console.log(error);
            })

        }
    }
</script>

在这里我们要知道一件事，那就是当浏览器第一次请求数据的时候，是先向 nuxt.js 服务器发送请求（asyncData 在服务器端运行），然后由 nuxt.js 服务器向提供数据的服务器发送请求，返回数据就进行渲染，然后给浏览器端，而在后面的请求中，则是由浏览器直接向提供数据的服务器进行请求，这时候就有了跨域的问题，因为上面这个例子所请求的接口已经帮我们在内部解决了跨域的问题，所以我们看不出来，我们来看下面这个例子

<script>
    import axios from 'axios';

    export default {
    
        name: "movie",       
        asyncData: function(context){            

            var url = 'http://m.maoyan.com/ajax/movieOnInfoList?token=';
            return axios.get(url).then(response=>{
                
                if(response.status === 200){

                    console.log(response.data.movieList);

                    return { movieData: response.data.movieList }

                }

            }).catch(error=>{
                console.log(error);
            })

        }

    }
</script>

当我们第一次请求的时候是完全没有问题的，但是当我们去到别的页面，再次回来的时候，我们就会发现数据出不来了，并且控制台有报错

解决跨域问题
1：安装一个 @nuxtjs/proxy

yarn add @nuxtjs/proxy

2：在 nuxt.congig.js 文件里进行如下配置

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
      '@nuxtjs/proxy' //添加 proxy 模块
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
      proxy: true  // 开启proxy
  },
    proxy: {
        // 前端如果遇到 /ajax/movieOnInfoList 请求交给 @nuxtjs/proxy（代理服务器） 向 target 服务发送网络请求
        '/ajax/movieOnInfoList': {
            target: 'http://m.maoyan.com/ajax/movieOnInfoList?token=',

        }
    },

3：因为第一次请求是在 nuxtjs 服务器端请求的，没有跨域问题，只有后面才会有，所以我们要做一个判断：
当前代码执行的环境，如果是服务器端：http://m.maoyan.com/ajax/movieOnInfoList?token=
果是客户端浏览器：/ajax/movieOnInfoList—》nuxtjs/proxy—> http://m.maoyan.com/ajax/movieOnInfoList?token=
我们的代码

<script>
    import axios from 'axios';

    export default {
        name: "movie",
        //asyncData:异步请求数据函数，发送网络请求，可看做 created 生命周期函数
        asyncData: function(context){
			//判断是在哪里发送请求的
            var url = process.server ? 'http://m.maoyan.com/ajax/movieOnInfoList?token=' : '/ajax/movieOnInfoList';

            return axios.get(url).then(response=>{
                // console.log(response);
                if(response.status === 200){

                    console.log(response.data.movieList);

                    return { movieData: response.data.movieList }

                }

            }).catch(error=>{
                console.log(error);
            })

        }


    }
</script>

这样就可以了