我们在制作网页时，有时候会考虑网站搜索的排名，而正常情况下在写spa应用时候，源代码不会有对应的文字，故网络爬虫检索不到，故没办法提高网站的搜索排名，这种情况的原因是由于服务端渲染与客户端渲染区别，客户端渲染不利于SEO搜索引擎优化，服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的。所以有时候我们就会用到nuxt来编程，
1.Nuxt.js介绍与安装(一个基于 Vue.js 的服务端渲染应用框架 )
下载安装：npx create-nuxt-app <项目名>
2.Nuxt.js的配置
https://zh.nuxtjs.org/guide/configuration
3.路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。所以不需要另外配置路由
（1）要在页面之间使用路由，使用
（2）嵌套路由
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。在pages文件夹创建一个films.vue文件后，如果想创建一个他二级组件就需要创建一个与他同名的文件夹然后在里面创建文件 films/newFilms.vue
(3)动态路由
必须加下划线 (文件夹也可以加下划线(多级嵌套)， 文件也可以加下划线)
如果想进入到不同的文件时，可以在动态路由里面定义，例如：
export default {
layout:"detail" //通过layout属性匹配不同的layouts
}
(4）获取动态路由参数
在vue中我们获取参数一般在create里面获取，但是这种获取方式并不利于搜索优化，所以在获取动态路由参数时候我们要用asyncData来获取，例如：
asyncData({params}){
console.log(params.id);
}
(5)路由的重定向 (nuxt.config.js)
router: {
extendRoutes(routes, resolve) {
routes.push({
path: "/",
redirect: "/film"
})
var index = routes.findIndex(item=>item.path === "/film")
routes[index].children.push({
path:"/film",
redirect:"/film/nowplaying"
})
}
}
还可以通过中间件的方式进行配置（middleware/redirect.js）
export default function ({ route,redirect}){
if(route.fullPath === "/film"){
return redirect("/film/nowplaying")
}
}
router: {
extendRoutes(routes, resolve) {
routes.push({
path: "/",
redirect: "/film"
})
},
middleware:["redirect"]
}
4.视图
在layout 里面写好default.vue 可以认为这是根组件的模板了，
所有的组件都加在里面，但是有些页面可能不一样，就可以使用个性化定制页面。
export default {
layout:"detailTpl"
}
5.异步数据与反向代理解决跨域
(1)如果组件的数据不需要异步获取或处理，可以直接返回指定的字面对象作为组件的数据。
(2)通过asyncData来异步请求数据
因为在created里面实现异步的话，对于搜索引擎来说是不知道的。
第一次刷新的时候是后端自己触发asyncData,异步获取到数据，然后进行组装，组装完毕后再将数据回传给前端进行显示，有利于seo搜索引擎优化。
后续的都是前端去调用asyncData这个方法，属于单页应用了，有利于用户体验
asyncData(){
return axios({
url:"https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&k=3273067",
headers:{
"X-Host": "mall.film-ticket.film.list"
}
}).then(res=>({
datalist:res.data.data.films
}))
}
跨域的解决方案： cnpm i @nuxtjs/proxy
nuxt.config.js
odules: [
'@nuxtjs/axios',
'@nuxtjs/proxy',
],
axios: {
proxy:true
},
proxy:{
"/ajax":{
target:"http://m.maoyan.com",
changeOrigin:true
}
}
asyncData ({ params }) {
const url = process.server?"http://m.maoyan.com":""
return axios({
method:"get",
url:url+"/ajax/mostExpected? ci=60&limit=10&offset=0&token=&optimus_uuid=A3531DF0B63711E8940A97B13D035BD69C7A62A9A316420284E6E4A55D748820&optimus_risk_level=71&optimus_code=10",
}).then((res) => {
return { datalist: res.data.coming }
})
},