Vue.js中如何将JSON数据转为友好URL并获取对应数据？

问题梳理 #

你期望URL显示为http://localhost:8082/blog/my-trip-to-zanziar，但实际生成了带%20（空格转义）的URL，导致无法正常获取数据，核心问题在于没有将标题转换为短横线分隔的友好格式（Slug），同时前端代码存在字段笔误。

分步解决 #

1. 生成友好Slug（短横线格式标题） #

先写一个工具函数，将标题中的空格替换为短横线并转为小写，确保URL格式友好：

// 可放在Vue组件的methods里，或全局工具文件中
function generateSlug(title) {
  return title.toLowerCase().replace(/\s+/g, '-');
}

修改路由跳转代码，使用转换后的Slug，同时修正blog._title的笔误（JSON字段为title）：

<router-link :to="`/blog/${generateSlug(blog.title)}`">
  <!-- 你的链接内容 -->
</router-link>

2. 后端接口适配查询 #

前端传的是Slug格式，后端需要对应处理查询逻辑，两种方案可选：

方案一：临时转换Slug为原标题（快速适配）

在后端接口中，将传入的Slug转换回带空格的原标题，再查询数据库：

// 以Express为例
app.get('/api/blogs/:slug', (req, res) => {
  // 将短横线替换为空格
  const originalTitle = req.params.slug.replace(/-/g, ' ');
  // 根据原标题查询博客
  Blog.findOne({ title: originalTitle })
    .then(blog => res.json({ blog }))
    .catch(err => res.status(404).json({ error: '博客未找到' }));
});

方案二：预存Slug字段（更优方案）

在博客创建时就生成Slug并存入数据库，后续直接通过Slug查询，性能更优：

// 创建博客时生成Slug
const newBlog = new Blog({
  _id: "62567252370e769a8a93a517",
  title: "my trip to zanziar",
  slug: generateSlug("my trip to zanziar") // 生成'my-trip-to-zanziar'
});
newBlog.save();

// 后端接口根据Slug查询
app.get('/api/blogs/:slug', (req, res) => {
  Blog.findOne({ slug: req.params.slug })
    .then(blog => res.json({ blog }))
    .catch(err => res.status(404).json({ error: '博客未找到' }));
});

3. 修正前端路由与数据获取代码 #

将路由配置中的参数名改为slug（语义更清晰）：

{
  path: "/blog/:slug",
  component: BlogDetail // 替换为你的详情组件
}

修改前端获取数据的代码，使用slug参数请求：

mounted() {
  axios
    .get(`http://localhost:4000/api/blogs/${this.$route.params.slug}`)
    .then(response => {
      this.blog = response.data.blog;
    })
    .catch(error => {
      console.log(error);
    });
}

效果验证 #

完成上述修改后，路由跳转将生成http://localhost:8082/blog/my-trip-to-zanziar格式的友好URL，后端能正确匹配并返回对应博客数据。

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