一、首页部分
1.在pages文件夹中创建movie文件夹(也是路由)
2.在layouts文件夹创建布局组件(目的是给多个组件加一个公用头部)
给点样式后:效果如下:
二、列表页部分
1.三个模块点击后我们想做成动态路由参数的形式(/movie/xxx),而不是再新建三个文件夹成为三个独立的路由
movie文件夹下新建_type文件夹,type文件夹下老规矩,一个index.vue文件。并写入布局组件
此时点击页面效果:
2.请求数据:
上面做个补充:跳转时拼上id,对应跳转的详情页面
点击后如下图:
三、详情页面
上面已经在列表页通过请求接口把列表的数据拿到,数据中有每个数据的id,我们在点击的时候跳转路由中也携带了id,那么在详情页只需要把id传给详情页的接口,就可以得到详情页的数据,然后把数据渲染出来。
1.创建_id文件夹,文件夹下中老规矩新建一个index.vue
2. 请求接口,绑定数据
四、SEO优化:
1. 全局的SEO优化:全局的就是每个页面都会有
在nuxt.config,.js配置文件中:
2.给指定某个页面优化
还可以设置页面title: