nuxt.js跳转路由没问题,刷新后404,NuxtLink跳转刷新后404

Nuxt.js中,当你使用路由跳转到某个页面后,刷新页面可能会导致404错误的问题。这是因为Nuxt.js默认使用了服务器端渲染(SSR),而刷新页面时,服务器无法正确地处理路由请求。

直接上代码
1.在nuxt.config.js文件中,添加target: 'static’配置项,以告诉Nuxt.js生成静态站点:
export default {
  target: 'static'
  // 其他配置项...
}
2.执行nuxt generate命令,生成静态站点:

第二步也不一定要使用,可能第一步就好了。

npx nuxt generate

nuxt generate命令会在dist目录下生成静态HTML文件。将该目录下的文件上传到你的服务器或静态文件托管服务上。

最后,有什么不懂的地方欢迎留言
我创建了一个技术交流微信群
加我V,拉你进群,备注来意
置顶的博客最下方有二维码,可加我V

这是我置顶博客的链接,点击跳转

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
nuxt.js是一个基于Vue.js的通用应用框架,它提供了一种简化和优化了前端开发体验的方式。在nuxt.js中,路由跳转可以通过以下几种方式实现: 1. 使用`<nuxt-link>`组件进行跳转: `<nuxt-link>`组件是nuxt.js提供的一个内置组件,可以用于生成符合项目路由规则的链接。你可以在模板中使用`<nuxt-link>`组件来跳转到其他页面。例如,如果你想跳转到名为`/about`的页面,你可以使用以下代码: ```html <nuxt-link to="/about">跳转到关于页面</nuxt-link> ``` 2. 使用`this.$router`对象进行编程式跳转: 在Vue组件中,你可以通过访问`this.$router`对象来进行编程式的路由跳转。你可以使用`push`方法来跳转到指定的路由路径。例如,如果你想在某个按钮的点击事件中跳转到名为`/contact`的页面,你可以使用以下代码: ```javascript this.$router.push('/contact') ``` 除了以上两种方式,你还可以使用其他的nuxt.js插件或扩展来实现更复杂的路由跳转逻辑。这些方式可以根据你的具体需求来选择和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [mybatis之模糊查询方法](https://blog.csdn.net/u013013790/article/details/122052896)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Mybatis模糊查询的四种方式](https://blog.csdn.net/qq_44865665/article/details/120160025)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值