在使用 NuxtJS 或 NextJS 时，是否可以根据需要在 URL 末尾添加 .html？

Question

我目前正计划使用具有 SSR 通用架构的 NuxtJS/NextJS 框架开发 Web 应用程序，我面临与 SEO 相关的困难，因为之前我的项目是用 .NET 编写的，所以所有 URL最后有.html..

例如：

• domain.com/hotels（这是 Cate）
• domain.com/hotels-5-star.html（这是酒店分类的子分类）

上面的例子是针对我的问题的，这意味着根据谷歌，URL越短越好，所以我的页面都被缩短为一个“/”，但是由于结构页面有2个层次结构, Cate 和 Sub cate，所以为了让谷歌区分这一点，URL（sub cate）必须在末尾插入.html。

我可以使用NuxtJS/NextJS构建页面与上面相同的URL吗？我研究了但找到了一个具体的解决方案，可能我的经验并不多，所以我需要专家的帮助NuxtJS/NextJS

Answer 1

是的，在nuxtjs，您可以使用@nuxtjs/router 来自定义您的路由器路径

nuxt.config.js

buildModules: [
    '@nuxtjs/router'
]

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const page = path => () => import(`./pages/${path}.vue`).then(m => m.default || m);

const routes = [
    {
        path: '/hotels-:star-star.html',
        name: 'hotels',
        props: true,
        component: page('hotels')
    }
];
export function createRouter(){
    return new VueRouter({
        routes
    });
}

pages/hotels.vue

<template>
    <main>
        {{ star }}
    </main>
</template>

<script>
export default{
    props: {
        star: {
            type: Number
        }
    }
}
</script>

Answer 2

我不是 SEO 专家，但我只会在 domain.com/hotels 中使用 5-star 作为查询

这意味着您可以像这样使用单一层次结构：

domain.com/hotels?rating=5-stars

就使用 html 文件作为站点的 URL 路由而言，nuxt generate 属性将项目构建为您可以控制的 html 文件。结构来自您在pages directory中设置的内容

Answer 3

如今，所有现代应用都有一些漂亮的 URL，看起来像 domain.com/hotels/
结尾有一个斜杠。不要混合和匹配它们。要么把它们放在任何地方，要么不放在任何地方。
就 SEO 而言，尾部斜杠无关紧要，您可以让它们使用。

现代 JS 框架在这方面做得很好，他们知道如果你到达domain.com/hotels/，你实际上是想在其中提供.html（又名.vue）文件，不需要添加它。

在 Nuxt.js 中，目录结构如下所示：

-- pages
---- hotels.vue

或

-- pages
---- hotels
------ index.vue

至于这个

网址越短越好

不要过分强调，你也不需要做超级短裤路径。

保持语义和逻辑。拥有domain.com/h5s 会非常糟糕。
此外，拥有domain.com/hotels/5-stars 或domain.com/hotels/?rating=5 完全没问题。
基本上，让它们以某种方式对最终用户可读。

---

PS：请注意 Next.js >> React 和 Nuxt.js >> VueJS。