尚硅谷-尚品汇项目开发总结（第十二天）

22：相关细节问题

        22.1 在a标签（route-link一样）中定义 target="_blank" 会打开新窗口打开页面。

        22.2 如果在路由配置中没有占位，params形式传递参数，刷新页面会导致数据丢失

        解决方法：

        1：使用query传参，局限性：如果传递的是对象，将会使URL路径不易读，使用无影响                      

        2：使用会话存储（sessionStorage），存储在浏览器中

        注意：会话存储不能够存储对象（纯数组可以，但是数组里也不能包含对象），所以需要用JSON.Stringify转变格式，使用时再使用JSON.parse转成对象

        22.3 游客临时id的生成

        因为在添加商品到购物车时，服务器需要一个用户的标识。

        解决方法：因为接口中没有游客临时id的位置，所以在请求头中进行传递。使用uuid将生成的唯一标识保存到本地存储localStorage中。

        功能模块放在utils文件夹中，在main.js文件中引入使用即可

import { v4 as uuidv4 } from 'uuid'
export const getUUID = () => {
    if (!localStorage.getItem('uuid')) localStorage.setItem('uuid', uuidv4())
    return localStorage.getItem('uuid')
}

        在请求拦截器中设置请求头

import axios from 'axios'
const requests = axios.create()
// 设置请求拦截器
requests.interceptors.request.use((config)=>{
    // 以请求头的方式把uuid传递给服务器，（请求头的名字是后台定义好的，不能随便写）
    config.headers.userTempId = localStorage.getItem('uuid')
    return config
})

        22.4 undefined可以被v-for遍历，不会有结构显示，不会报错，就算再item.a也不会报错。

        22.5 数组的every()方法

        介绍：遍历数组的每一个元素，如果全都满足回调函数的返回值，则返回true，只要有一个不满足，则返回false

        注意：空数组进行every遍历，返回值是true