vue（2）电影详情

一、电影页面

1. 在data中设置一个空数组（movelist）
2. 在created中通过axios引入接口信息 每次请求获取十条数据 接口中的start设置为当前movelist的长度，当接口请求成功后，将返回信息下的电影信息（data.subjects数组）与当前的movelist数组通过扩展运算符合并起来（不能直接赋值，会将之前的信息覆盖）

   

3. 通过v-for将movelist中的数据展示到页面中
4. 在created中调用window下的onscroll方法，判断当前页面是否滚动到底部，若已到底部，则调用axios继续请求十条数据

   

5. 当请求数据时，设置加载动图，为动图设置v-show="isshow"属性，并将该属性默认值设为false，在请求数据前将isshow设为true，请求成功后再次设为false

跨域问题在接口连接前加https://bird.ioliu.cn/v1?url=

当请求信息时，由于请求信息慢，会在信息为请求成功时报错 可以添加上 v-if="booklist.length > 0"属性

在axios请求数据时，要使用箭头函数，以获取父元素中的this

当出现html访问图片资源403问题时，在public文件下HTML代码的head中添加一句即可

<meta name="referrer" content="no-referrer" />

二、电影详情页面

6. 点击每条电影信息时，会触发点击事件，进入到当前电影的详细信息页面（编程式导航）。在点击事件中，将该条电影信息中的id传值，在电影详情页面的路由中接收该值（url路由传值）

   

7. 电影详情页面中，在data中设置一个空数组（movieinformationlist）
8. 在created中通过axios请求电影详细信息数据，并在请求地址中用ES6的方法拼接当前页面路由id），当接口请求成功后，将返回信息下的电影信息（data数组）赋值给当前的movieinformationlist数组

9. 在页面中展示movieinformationlist中的信息

router：编程式导航，route：页面路由信息