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

Is it possible to add .html at the end of the URL as you like while using NuxtJS or NextJS?

我目前正计划使用 NuxtJS/NextJS 框架和 SSR 通用架构开发一个 Web 应用程序,我面临与 SEO 相关的困难,因为之前我的项目是写在 .NET 中,所以所有 URL 的末尾都有 .html..

例如:

上面的例子是针对我的问题的,也就是说根据Google,URL越短越好,所以我的页面都被缩短为一个“/” , 但是因为结构页有 2 个层级,Cate 和 Sub cate,所以为了 Google 区分这一点,URL(sub cate)必须在末尾插入 .html

我可以用NuxtJS/NextJS构建页面和上面一样的URL吗?我研究了一下,找到了具体的解决方法,也许我的经验是不多,所以我需要 NuxtJS/NextJS

专家的帮助

我不是 SEO 专家,但我会在 domain.com/hotels

中使用 5-star 作为查询

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

domain.com/hotels?rating=5-stars

就使用 html 文件作为站点的 URL 路由而言,nuxt generate property builds the project into html files which is under your control. The structure comes from what you set in the pages directory

是的,在 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>

现在,所有现代应用程序都有一些漂亮的 URL 看起来像 domain.com/hotels/
末尾有斜杠。不要混合搭配它们。要么无处不在,要么无处不在。
在 SEO 方面,尾部斜杠无关紧要,您可以使用它们。

现代 JS 框架在这方面做得很好,他们知道如果你达到 domain.com/hotels/,你实际上想要服务 .html(又名 .vue )文件在里面,不用加。

在 Nuxt.js 中,目录结构如下所示:

-- pages
---- hotels.vue

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

至于这个

the shorter the URL, the better

不要太紧张,你也不需要做超短路径。

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


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