博客

在编写vue3+vite项目时，使用动态路由访问axios请求路径发生错误，会额外加一个我们的动态路由路径进来，这不是我们想要的结果，问题如下：

vite.config.js

server:{
    proxy:{
      '/api':{
        target:'http://**.**.**.**:**/api',
        changeOrigin:true,
        secure: false,

        rewrite:path=>path.replace(/^\/api/,'')
      }

    }
  },

子组件：paperdetail.vue

function init(){
  console.log(route.params.id)
  axios.get('api/v1/wallpaper/').
  then(res => {
    console.log(res.data)
  subNum.value = res.data.data.subNum
  likeNum.value = res.data.data.likeNum
  visitNum.value = res.data.data.visitNum
  commentNum.value = res.data.data.commentNum
})
}

路由实现 router.js

 {
      path: '/wallpaper/:id',
      component: () => import('../views/paperDetail.vue')
    },

若如此做，在访问paperdetail时（http://*.*.*.*:*/wallpaper/1223445），会自动加载init函数，访问的路径会莫名其妙添加一个wallpaper进来

如  GET http://127.0.0.1:5173/

wallpaper

/api/v1/wallpaper/ 404 (Not Found)

而不是我们想要的 http://127.0.0.1:5173/api/v1/wallpaper/

而且在后续的探究中，我发现这个会变化的路径与我们的动态路由相关，我们更改这个wallpaper为paper，这个会变化的路径也变为了paper，于是定位错误，开始解决

解决方案

将paperDetail中的请求改为如下，将路径前面加一个

/

, 这是绝对路径与相对路径的问题。

function init(){
  console.log(route.params.id)
  axios.get('/api/v1/wallpaper/').
  then(res => {
    console.log(res.data)
  subNum.value = res.data.data.subNum
  likeNum.value = res.data.data.likeNum
  visitNum.value = res.data.data.visitNum
  commentNum.value = res.data.data.commentNum
})
}

关于绝对路径与相对路径的知识请见：

vue项目中使用axios遇到的相对路径和绝对路径问题 (wuyaogexing.com)