兄弟，我一眼就看穿问题所在了！你当前用的this.$router.push('bloglist')是相对路径跳转，而此时你的页面处于/blogdetail/:id这个路由下，相对路径会直接拼接在当前路由的后面，所以才会跳转到/blogdetail/bloglist，完全偏离了预期的目标页面。

下面给你几个靠谱的解决方案：

方案1：使用绝对路径跳转 #

把跳转路径改成带斜杠的绝对路径，这样路由就会从根路径开始匹配，直接跳转到目标页面：

}).catch(error => {
  console.log('something wrong happened' + error);
  this.$router.push('/bloglist') // 前面加斜杠，变成绝对路径
})

方案2：使用命名路由（更推荐） #

先确保你的路由配置里给bloglist路由添加了name属性，比如：

// router/index.js 中的路由配置
const routes = [
  // ...其他路由
  {
    path: '/bloglist',
    name: 'BlogList', // 给路由命名
    component: () => import('../views/BlogList.vue')
  },
  {
    path: '/blogdetail/:id',
    name: 'BlogDetail',
    component: () => import('../views/BlogDetail.vue')
  }
]

然后在错误捕获里通过路由名称跳转，这种方式不受路径结构变化的影响，更稳定：

}).catch(error => {
  console.log('something wrong happened' + error);
  this.$router.push({ name: 'BlogList' }) // 通过路由名称跳转
})

额外注意：确保错误被正确捕获 #

有时候可能后端返回了403/401这类权限错误，但Axios默认不会把这些状态码的响应丢进catch，这时候你需要配置响应拦截器，手动把这类错误抛到catch里：

// 在Axios初始化的地方添加拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    // 判断响应状态码，如果是权限相关错误，直接抛出
    if (error.response && [403, 401, 404].includes(error.response.status)) {
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

这样调整后，当用户访问不属于自己的博客时，就能正确重定向到博客列表页啦～

内容的提问来源于stack exchange，提问作者user9465677