Nuxt 增加 .html 后缀

如何让 Nuxt 匹配 .html 后缀?

首先定义一个动态路由 _cat.vue, 一般来说我们定义的动态路由都是为了获取在 url path 的中的参数，比如 http://hai-fe.com/plainJs/selecting/select-dom-elements-by-css-selector 中 select-dom-elements-by-css-selector 就是我们想要的参数, 但是当我们使用 http://hai-fe.com/plainJs/selecting/select-dom-elements-by-css-selector.html 来访问时 _cat 匹配到的会是 select-dom-elements-by-css-selector.html，这个时候如果页面想要返回正确的内容时就需要把.html去掉，所以只需要将这个参数的值修正select-dom-elements-by-css-selector 即可，这个操作我们可以在 created() 或者 asyncData()中进行这个操作。参考如下:

...
created() {
    const params: any = this.$route.params
    const cat = params.cat.replace('.html', '')
    ...
}
...

即可实现 http://hai-fe.com/plainJs/selecting/select-dom-elements-by-css-selector.html的正常访问。访问 (opens new window)