VueJS 基于 Random Slug 的 URL 的最佳方法答案

【问题标题】：VueJS Best Approach to Random Slug Based URLsVueJS 基于 Random Slug 的 URL 的最佳方法
【发布时间】：2020-04-04 07:50:17
【问题描述】：

我有一个渲染博客文章的 Vue 组件。它目前只是加载一组帖子并将它们呈现给 UI。这一切都很好。

每个帖子都有一个 slug，即the-best-post-ever。

我想让我的博客组件能够读取该值（或将其传递）并呈现该单独的帖子而不是列表。

因此访问博客类似于http://example.com/blog，而单个帖子则类似于http://example.com/blog/the-best-post-ever。

最好的处理方法是什么？

【问题讨论】：

我猜你已经熟悉router.vuejs.org了？
确实如此。这就是我最初考虑的处理方式，但我对 Vue 还是很陌生，所以想确保使用这种方法是有意义的。在发布这个问题后，我发现了这个stackoverflow.com/questions/61025195/…
好像链接是指这个话题。 :) 但是如果你不需要 SSR，你可以使用 beforeRouteEnter 和 beforeRouteUpdate 守卫来通过 http 请求获取数据。我应该给你写个例子吗？
是我还是找到了这个“链接”
糟糕，这个链接stackoverflow.com/questions/53243924/…

标签： vue.js

【解决方案1】：

事实证明这非常简单。

我更新了我的路由器：

name: 'blog',
title: 'Blog',
path: '/blog/:slug?',
component: () => import(/* webpackChunkName: "blog" */ './views/Blog.vue'),
meta: {
    isMain: true,
    public: true,  // Allow access to even if not logged in
    requireAdmin: false,
},

现在在博客组件中：

mounted() {
    console.log(this.$route.params.slug);
},

我现在可以将 slug 连接到服务器 API 并获取这篇文章。

在我的博客组件中，我将其存储在一个局部变量中：

created() {
    this.slug = this.$route.params.slug;
},

并将其传递给实际的博客渲染组件，如下所示：

<BlogReaderComponent category="news" :slug="slug" />

然后博客阅读器组件可以简单地忽略任何类别变量并呈现单个帖子而不是帖子集合。

我从 mounted() 切换到 created() 是为了让这些数据在生命周期中尽早可用，以便在创建 <BlogReaderComponent 时正确初始化此值。

【讨论】：