Question

我正在学习如何使用vue路由器而且我无法理解如何做某事。

我有一条有这条路径的路线：＆＃39; / entry /：id /＆＃39;。所以，我想要一个详细页面。

我用v-for循环遍历每个条目，显然，从该条目获取id，然后将其作为param发送到router-link，如下所示：

<router-link :to="{ name: 'entry-detail', params: {id: entry.id} }">

当访问该链接时，我得到了这个。$ route.params.id并且我能够向API发出get请求以获取该特定条目。问题是，当我访问具有无效ID的条目详细信息页面时（例如/ entry / invalid_id /），它使我得到没有数据的布局，公平，但我怎样才能设法从该页面重定向或显示404模板而不只是填充空白页面？

顺便说一句，对不起我的语法错误。

提前感谢您的回答！

Answer 1

假设您的ajax响应返回错误代码，那么您应该能够捕获并在响应中处理它，我在这里使用axios：

axios.get('/api/results/' + this.$route.params.id).then(response => {
  // success, set the model variables
}).catch(error => {
  // Nope, let's check what the error was
   if(error.response.status === 404){    
     // redirect user   
     this.$router.push('/notFound')
   }
})

如果您没有收到错误回复，则只需在数据为空时重定向：

axios.get('/api/results/' + this.$route.params.id).then(response => {
  // success, set the model variables
  if(response.data == null){
    this.$router.push('/notFound')
  }
  // success, set the model variables
}).catch(error => {
  // Handle errors
})

Vue路由器参数无效

1 个答案: