嵌套路由的踩坑点

嵌套路由的踩坑点

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/push',
      name: 'push',
      meta: {
        isHidden: true,
        title: '添加文件',
      },
      component: test,
      children: [
        {
          // 错误点：这里的路径应该是相对路径 push2 而不是 /path2
          path: '/push2',
          name: 'push2',
          meta: {
            isHidden: true,
            title: '添加文件2',
          },
          component: test2
        }
      ]
    }
  ]
})

在使用嵌套路由的时候，使用/push/push2导航提示：No match found for location with path “/push/push2”
但是直接使用/push2的时候路由却能正确导航，并且子组件也是嵌套在父组件内部，原因是我们在子组件内部使用path 的时候应该使用相对路径push2而不是'/path'

  children: [
        {
          // 正确
          path: 'push2',
          name: 'push2',
          meta: {
            isHidden: true,
            title: '添加文件2',
          },
          component: test2
        }
      ]

文件上传踩坑

最近写了一个excel文件自动拆分功能，在前端上传文件的时候，直接使用原生标签form的action属性上传可以正常上传成功，但是我想使用fetch自定义上传，后端死活接收不到文件，各种百度都是说要在headers上面指定提交格式

headers: {
  'Content-Type': 'multipart/form-data',
},

正确做法是不要指定headers的上传类型，浏览器会自动更改，手动指定反而造成上传错误

  // 正确做法
  const formData = new FormData()
  // 上传的文件名 excelFile 后端接收的时候也要一致
  formData.append('excelFile', file.originFileObj)
    let res = await fetch('/api/uploadfile', {
      method: 'POST',
      body: formData
    })
    let result = await res.json()