在Vue和Vue路由器SPA中，显示404未找到的资源

Question

我正在SPA中使用Vue和Vue Router。在视图组件中，我查询资源库。如果找不到资源，我想在保留URL的同时显示404页面。

即如果我访问/foo/non-existant-id，那么应该显示404页面来代替foo资源的显示页面。

为清楚起见，这是我的路由器地图：

router.map({
  '/foo/:id': {name: 'foo-show', component: FooShowPage},

  // Utilities
  '/': { name: 'home', component: HomePage },
  '*': { name: '404', component: NotFoundPage }
})

在我的FooShowPage中，我执行以下操作：

ready () {
  // fetch the foo from the repo (app.foos)
  app.foos.fetchById(this.$route.params.id).then(foo => {
    this.foo = foo
  }).catch(e => {
    // foo is not found show a 404 page
    // using this.$route.router.go({name: '404'}) does not work as route is a wildcard 
    console.warn(e)
  })
}

基本上，它可能涉及用FooShowPage替换路由器视图中的NotFoundPage，或重定向到定义的404页面，同时保持浏览器历史不变。

Answer 1

您需要为404页面设置路由，然后将不匹配的路由重定向到它。我在地图后使用router.redirect来做这些事情。

router.map({
  '/': { name: 'home', component: HomePage },
  '/foo/:id': {name: 'foo-show', component: FooShowPage},
  '/404': {name: 'not-found', component: NotFound}
})

router.redirect({
    '*': '/404'
})

然后，未在地图中列出的所有路线将重定向到/404

Answer 2

我弄清楚如何做的最好的方法是使用Axios的全局拦截器来重定向通过API 404接收的所有404响应。然而，这确实将网址改为/ 404，就像@Leo的回答一样。

const http = axios.create({
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
});

// Add some global response intercepters
http.interceptors.response.use(function (response) {
  // For successes just continue as normal
  return response;

}, function (error) {
  // If we have a 404 redirect to the error page replacing the history
  if (error.response.status === 404) {
    return router.replace({ name: 'notfound' });
  }

  return Promise.reject(error);
});

export default http;