vue.js - 如何在 Nuxt.js 中获得 Stack Overflow SEO 友好的 URL 结构？

Question

Stack Overflow 的 URL 结构如下 stackoverflow.com/questions/{question ID}/{question title} , 如果你输入错误 {question title}您将被永久重定向 301只要您有正确的 URL {question ID} .
假设我有 id和 slug ，如何制作与 Stack Overflow 相同的 URL 结构 Nuxt.js与 SSR ?
编辑:显然 URL 结构被称为 Clean URL .
我曾尝试使用带有 pages/x/_.vue 的完全动态 URL。 ，但这为每个请求提供了一个"new"页面，并且不会提供 301 重定向。
This post建议如下:/questions/8811192/question-title可以改写为 /mywebsite.php?id=8811192&convention=questions .所以如果我能解释/qeustions/{id}/{title}就像/qeustions/{id}我想我可以做到一半。

Answer 1

以下对我有用，但我不确定它是否与 Stack Overflow URL 结构的工作方式完全相同。
我正在使用 async asyncData从数据库中获取内容，并且您可以访问
context和 redirect , req和 res作为参数，您可以执行 301重定向。
首先我使用 unknown dynamic nested routes在我这样的文件夹中 /pages/folder/_.vue .这将捕获所有路线，包括 domain.com/folder/{id}和 domain.com/folder/{id}/{title} .
要获取请求的 url 中的 ID，您可以拆分 pathMatch 并获取第一个元素，如下所示 params.pathMatch.split('/')[0] .
然后我使用 id 从数据库中获取内容，在我的例子中是 Strapi。像这样 await $strapi.findOne('contentType', id) .
之后我们可以像这样创建我们想要的实际 URL /folder/${data.id}/${data.slug} .注:data.slug可以用 data.title 代替可以转换为 URL 友好字符串。
最后，我们可以将用户请求的 URL 与内容的实际 URL 匹配 if(route.fullPath !== actualURL) ，如果请求的 url 不同，我们可以使用 redirect(301, actualURL) 执行重定向.
我的整个代码:

async asyncData({ redirect, req, route, app, $strapi, error, params }) {
    try {
        const recipeID = params.pathMatch.split('/')[0];
        const matchingRecipe = await $strapi.findOne('recipes', recipeID);
        const correctPath = `${app.localePath('recipes')}/${matchingRecipe.id}/${matchingRecipe.slug}`;
        if(route.fullPath !== correctPath) {
            console.log(`Redirect: ${route.fullPath} => ${correctPath}`);
            redirect(301, correctPath);
        }
        return {
            recipe: matchingRecipe
        }
    } catch(e) {
        console.log(e)
        error({ statusCode: e.statusCode, message: e.original });
    }
    
},