问题
我忽然发现，网站刷新的时候打不开了，如果是路由跳转进去，是失常的
然而网站经常链接会被他人珍藏，或者间接分享关上，间接打不开必定不好
问题剖析：此网站我是采纳的nuxt.js开发的，个别这种谬误类型，通过网络申请的数据，而后在对象下的某属性失落，造成谬误类型
排查
通过查看，是在父级页面申请的数据，传到子组件数据失落
page.js 页面
<template> <div class="aritcle-detail"> <Header /> <div class="wp clearfix"> <Detail :detail="detail"></Detail> </div> <Footer /> </div></template><script>import { apiNavthemeDetail } from '@/api/navtheme'import Detail from '@/web/article/Detail'export default { components:{ Detail }, async asyncData({ $axios, app, store, params,route }) { console.log('router',params.id); const res = await apiNavthemeDetail({ id: params.id }); return { detail: res.data, params } }, mounted() { setTimeout(() => { console.log('params', this.params) console.log('detail', this.detail) }, 3000) }}</script>Detail子组件
<template> <div class="detail"> <div class="detail-left"> <div class="info"> <div class="header"> <h1>{{detail.title}}</h1> <div class="meta"> <span> {{detail.member.it_name}}次 </span> </div> </div> <div class="user"> <div class="user-left"> <div class="img"> <img :src="detail.member.userhead" alt /> </div> <div class="name"> <b>{{detail.member.username}}</b> <span class="user-title">{{detail.member.description}}</span> </div> </div> </div> <div class="content article-md"> <no-ssr> <mavon-editor class="detail-md itnavs-markdown" :value="detail['content']" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false" :editable="false" /> </no-ssr> </div> </div> <div class="community"> <img src="@/assets/images/qzdh.jpg" alt /> </div> </div> </div></template><script>import Rightuser from './Rightuser'import Casually from './Casually'export default { components: { Rightuser, Casually }, props: ['detail'],}</script>查看服务器日志
nuxt.js 是node过程，启动的是用pm2，如有不懂，清查看我之前写的【文章】
pm2 logs此处得出结论，认为是服务没有查找数据，咱们查看服务端代码
public function detail(){ $id = input('id'); $navtheme = new NavthemeModel(); $detail = $navtheme->where('id',$id)->with(['member'=>function($query){ $query->field('it_name'); },'taxonomic'=>function($query){ $query->field('name,id,parentid'); $query->with('primary'); }])->find(); $navtheme->where('id',$id)->inc('hits',1)->update(); $detail['recommended'] = $navtheme->recommended(); return $this->showWebData(['data'=>$detail]);}揣测，$navtheme去查找时失败，未查找到相干数据，导致member类型空，那么在客户端前端写法
detail.member // 为undefineddetail.member.it_name // 报错，undefined 上面没有数据属性，导致nuxt.js异样代码始终我未动过，为啥呈现这种状况，不得奇解
通过排查，我尝试在这里，打印id
$id = input('id');dump($id)得出结论：null，那么问题找到了，也就会客户端穿过来的参数id，没有承受到，导致没有查问到数据
此时又有问题，前端和后端都是我写的，都跑了大半年没问题，怎么忽然参数失落了，为了验证，此刻咱们能够查看nginx日志
nginx日志
通过宝塔面板能够查看到可视化查看nginx日志，当然也能够用命令行去查看，会更粗疏一些
通过排查在参数失落
确认前端是否传入参数
async asyncData({ $axios, app, store, params, router }) { console.log('router ',router.id) console.log(params.id)},nuxt.js asyncData 函数是在服务端执行，所以在客户端是看不到的，须要在服务端看，我持续应用pm2 logs查看
论断：前端传递参数，后端没有承受到参数，在传输过程中失落，前端应用的是用的axios.js
axios.js参数传输过程中失落
首先确认axios.js版本，是否过于老旧
{ "name": "nuxt-itnavs", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "axios": "^0.21.1", }, "devDependencies": { "@nuxtjs/style-resources": "^1.0.0", "vue-img-cutter": "^2.1.10" }}再次回到，问题所在 我忽然发现，网站刷新的时候打不开了，如果是路由跳转进去，是失常的，清看结尾，意思是间接进来的有问题，路由跳转的没问题
在这个问题，须要搞懂nuxt.js的执行机制，nuxt.js次要解决了seo渲染问题，原理，先拿到数据，而后拼接成html模板，返回客户端，这样有了实在数据dom节点
我记得在axios.js 0.18之前的版本存在post参数失落，参数传递了，后端承受不了，起初版本修复了此问题
Axios-中文文档
查看axios.js封装
// loca 其妙设计如果申请的过的数据间接取，不必发送申请const post = async(url, params, hand = { loca: false }) => { if (process.server) { const res = await http.post(handLastUrl(url), params); return res.data; } else { let key = url.replace(/\//g, 'A'); if (key && hand.loca && window[key]) { return window[key]; } const res = await http.post(handLastUrl(url), params); if (hand.loca) { window[key] = res.data; } return res.data; }}通过排查因为axios默认发送数据时，数据格式是Request Payload，而并非咱们罕用的Form Data格局，PHP后端未必能失常获取到，所以在发送之前，须要应用qs模块对其进行解决
import qs from 'qs'; // 援用之前记得装置 npm i qs -Shttp.post(handLastUrl(url), qs.stringify(params));办法二
如果想疾速解决问题， 把参数间接带在url，不过这种状况，最好搁置一些相似id，数据比拟少的数据进行传输
const apiTaxonomicItems = (params) => { return post(`${prefix}/taxonomic/items?id=${params.id}`, params)}export { apiTaxonomicItems,}批改后，打包后编译
npm run build // 客户端打包实现后上传，.nuxt,static,nuxt.config.js,package.json,这四个文件
pm2 restart all // 服务端 pm2重启此刻网站能够失常拜访，详情页面刷新也都没问题，【全栈导航】
写到最初
明天是七夕节，祝大家节日快乐，
人总是这样，大道理都懂，小情绪却难以自控，从童稚到成熟，从单纯到简单，咱们都曾不堪一击，也终将刀枪不入。