Vue.js - 当动态变量不存在时加载替代组件

Question

我已经为此苦苦挣扎了几天，并希望有一种优雅的方式来处理没有数据的动态 URL。

我有以下路线：

const router = new VueRouter({
  routes: [
    {path: '/product/:slug', component: Product},

    {path: '/404', component: PageNotFound, alias: '*'}
  ]
});

在Product 组件中，我有一个产品对象，并根据slug 变量加载要显示的产品。

我遇到的问题是当 URL 是产品数据集中不存在的 slug 时。我想加载 PageNotFound 组件，而不更新 URL。

这可能吗？在整个应用程序中拥有一致的 404 页面会很好，而且我不必在产品表中重复使用 v-if 对我也有好处。

我最接近它的是：

if(!product) {
    this.$router.replace({path: '/404', query: {product: this.$route.params.slug}});
}

但是，这会更新实际的 URL，这不是很好的用户体验。

有什么线索吗？

Answer 1

如果查询没有返回结果，您可以有条件地在 Product.vue 中呈现您的 PageNotFound 组件，然后根本不必摆弄您的路由器。

Answer 2

感谢凯尔为我指明了正确的方向，这就是我想出的。

---

因为我有点不正统并且使用服务器端组件和 JavaScript，我已经加载了我的页面未找到组件 - 看起来像这样：

const PageNotFound = {
  name: 'PageNotFound',

  template: `<div>
    <h1>404 Page Not Found</h1>
    <p>Head back to the <router-link to="/">home page</router-link> and start again.</p>
  </div>`
};

我确保PageNotFound.js 文件在我的产品组件之前加载到 HTML 中，因此我能够执行以下操作：

const ProductPage = {
  name: 'ProductPage',

  template: `<div>
    <div v-if="product"><h1>{{ product.title }}</h1></div>
    <page-not-found v-if="notFound"></page-not-found>
  </div>`,

  components: {
    PageNotFound
  },

  data() {
    return {
      notFound: false
    }
  },

  computed: {
    product() {
      let product;

      if(Object.keys(this.$store.state.products).length) {
        product = this.$store.state.products[this.$route.params.slug];

        if(!product) {
          this.notFound = true;
        }
      }

      return product;
    }
  }
};

以上注意事项：

• 数据正在异步加载，因此检查产品是否存在
• PageNotFound 组件已加载 - 这是 PageNotFound: PageNotFound 的 ES6 - Vue 然后自动创建一个 <page-not-found></page-not-found> 元素
• 然后该元素有一个 v-if 被触发。如果没有产品，第一个容器将不存在，因此仅显示 404 组件
• 我不是根据产品来做的，因为如果产品数据仍在通过 API 加载，你会得到一个 404 的闪现。
• 最好将 URL 参数设置为 props (see docs)，我将在某个时候这样做！

总之，这允许您在整个 SPA（单页应用程序）中显示一致的 404 页面，同时使用动态路由维护 URL。它允许您在不更新 URL 的情况下加载另一个组件或显示另一个组件，还允许您为动态路由使用通配符 404。

希望这一切都有意义，并在未来帮助某人，并避免他们浪费大约 4 小时的试验、错误和谷歌搜索。 （是的，我有“关键字”和短语填充这个答案以帮助某人找到它......）