Nuxt静态站点页面刷新后路由跳转链接错误如何修复？

• 你使用的相对路径写法的nuxt-link路径解析依赖当前页面URL基准：你当前的:to="article.slug"是相对路径，当页面刷新后浏览器自动给URL补全末尾斜杠时，路径的解析基准就从/nuxtblog/变成了/nuxtblog/当前文章slug/，就会出现slug重复拼接的错误。
• 静态站点的默认行为就是访问对应目录路径时自动补全末尾斜杠，你通过nuxt generate生成的每个文章页都是独立目录下的index.html，所以浏览器补全斜杠的行为是正常的。

方案1：修改链接为根相对路径（更推荐） #

给to属性的路径开头加/，强制路径基于站点根目录解析，Nuxt会自动拼接你配置的router.base，无需手动处理前缀：

<ul>
  <li v-for="article in list" :key="article.slug">
    <nuxt-link :to="`/${article.slug}`">
      {{ article.title }}
    </nuxt-link>
  </li>
</ul>

方案2：配置全局关闭末尾斜杠 #

如果你不想修改链接写法，也可以在nuxt.config.js中添加配置，禁止生成带末尾斜杠的静态路径：

export default {
  // 其他原有配置
  router: {
    base: '/nuxtblog/',
    trailingSlash: false
  },
  generate: {
    trailingSlash: false
  }
  // 其他原有配置
}

修改配置后重新执行nuxt generate部署即可生效。

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