nuxt 动态路由打包报多个404

最新推荐文章于 2023-09-15 18:13:38 发布
最新推荐文章于 2023-09-15 18:13:38 发布
阅读量1.6k 收藏
点赞数
分类专栏： nuxt 文章标签： vue js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangzixiansheng/article/details/121474957
版权

前提是之前打包设置打包成功的。也就是设置了promise，之后新增了store初始化的请求

我之前是从store初始化，请求到数据之后，就在页面直接拿state数据渲染。

简单的banner图没问题，但是类似详情这种，既要进行动态路由请求，又要初始化渲染数据

对于nuxt初始化理解，也算不够深刻。
我先是初始化，单个id循环请求完所有的详情数据，放入数组。
在页面进行查找某个id ,然后再找到id对应的详情数据 ，进行渲染

结果就是打包报多个404，以及打包停止（不报错）。

解决办法

在页面 async asyncData（）方法里，获取到详情id，进行请求。
这样 在打包的时候就可以既打包动态路由 数据渲染也没有问题。

且打开打包好的静态文件中，是看不到请求的

弑天落羽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nuxt - [高效简洁] 路由不存在时，跳转到自己定制的 404.vue 页面（当路由不存在时自动重定向到自定义的 404 组件）路由配置的解决方案
王佳斌
11-17 3185
nuxt当路由不存在时怎么跳转到404页面，nuxt.js实现路由不存在时跳转到自己做的404页面，NUXT.JS实现当网页链接不存在后，自定跳转重定向到404，nuxt.js 跳转 404，nuxt.js写项目时增加错误提示页面操作，页面重新加载后,Nuxt动态路由返回404 ，nuxtjs 不存在路由重定向至404页面，Vue在Nuxt.js中重定向404页面的方法，nuxt.js 页面404怎么做，Vue在 Nuxt.js 中重定向 404 页面的方法，【NuxtJs】不存在路由重定向至404页面，如
Nuxt的动态路由和参数校验操作
01-21
其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详情页，这时候就需要动态路由的帮助了。 新闻详细页面 我们在news文件夹下面新建了_id.vue的文件，以下划线为前缀的Vue文件就是动态路由，然后在文件里边有$route.params.id来接收参数。 /pages/news/_id.vue <template> <div> <h2>News-Content{{$route.params.id}}</h2> <ul> <li><a>Home</
Vue在 Nuxt.js 中重定向 404 页面的方法
10-17
主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
nuxt静态部署打包相对路径操作
01-22
以往在nuxt项目中，打包静态化部署的的文件如下： 路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。 nuxt不同于vue项目，思索了许久，终于找到了配置的地方： nuxt项目中 nuxt.config.js ： module.exports = { router: { base: './' } } 打包后的文件： 补充知识：nginx部署，nuxt静态部署，路由跳转失效的问题 nuxt静态部署问题 静态部署：路由模式跳转失效的问题；不能使用历史模式，需要使用 ‘hash’ 模式，再进行打包 ‘npm run generate’ 文件:nuxt.conf
vue-router之nuxt动态路由设置的两种方法小结
10-17
今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
nuxt.js跳转路由没问题，刷新后404,NuxtLink跳转刷新后404
最新发布
qbbhgn的博客
09-15 1282
在Nuxt.js中，当你使用路由跳转到某个页面后，刷新页面可能会导致404错误的问题。这是因为Nuxt.js默认使用了服务器端渲染（SSR），而刷新页面时，服务器无法正确地处理路由请求。
nuxt页面跳转_Nuxt.js错误页面跳转可能出现的问题
weixin_39624769的博客
12-21 1107
在我们的编程开发中,需要考虑 404 、500、连接超时(服务器关闭)是非常常见的手段.首先我们知道的两种错误跳转知识:有2种方式处理错误页面方式1：默认路径，_.vue。(先执行)方式2：错误页面，~/layouts/error.vue温馨提醒: 方式2的错误跳转详解在上一篇中,如果想了解更多可以自行前往.可能出现的问题描述;当这两种错误页面跳转的方式同时出现在一个开发环境中(同一个项目), ...
nuxt.js 打包部署及刷新页面404问题解决
weixin_43560347的博客
12-19 7098
nuxt.js 打包部署及刷新页面404问题解决 一.打包 npm run generate 将生成的dist文件部署服务器上 二.刷新404终极解决办法 1.在nuxt.config.js文件中添加 base为文件路径地址 router:{ base:'/dist' } 2.在打包的dist目录下创建 .htaccess 文件 dist 为地址的根目录 <IfModule ...
nuxt 404
qq_36632604的博客
07-15 1014
nuxt各种调试404 name值不存在 原来写错了
「qiankun+nuxt」子应用请求本地文件报错404
莫奈小姐姐的博客
03-11 1027
目前公司的前端架构是qiankun+nuxt做的微前端项目。记录遇到的问题
Nuxt的路由动画效果案例
01-18
Nuxt.js提动两种方法为路由提动动画效果，一种是全局的，一种是针对单独页面制作。 全局路由动画 全局动画默认使用page进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根...
Github.io部署nuxt.js生成的静态文件404问题解决方法
Capricorncd
12-09 3071
现象 使用Nuxt.js开发的个人页面，部署到Github.io后，_nuxt/*.js等静态问题不能访问，提示404错误。 js文件实际上市存在的 原因推测 nuxt generate后的文件名(_nuxt/*.js)比较特殊，触发了Github.io的 content-security-policy，所以被禁止访问。 解决方法 使用Node.js修改nuxt generate 后的文件夹名称。把_nuxt 改成 static 之类的。 同时nuxt.config.js也做相应的修改。 nuxt.c
nginx反向代理 404_nuxt从打包到上线Nginx反向代理
weixin_39837867的博客
11-23 477
nuxt项目完成之后打包项目在开发完成之后。首先使用npm run build进行打包把 static nuxt.config package.json .nuxt 拷贝到服务器 这里有个重点上传到服务器之后访问资源发现一堆错误。错误已经被我解决了就不贴错误的图片了。给大家说一下怎么解决的。将assets资源文件也拷贝一起上传到服务器。服务器环境要求node一定要8.12.0版本以上才行...
解决Nuxt 执行generate静态化后 文件路径错误导致404，CSS无效，JS不执行的等问题...
weixin_34383618的博客
08-06 6680
因项目需要，本人需部署静态文件到阿里云服务器上，执行nuxt generate后，产生的index.html打开之后一堆404，原因就是router没有配置。 nuxt.config.js里 需要如下配置 router:{ base:"/" //此为根目录，如果有具体目录需求按实际情况写 } ...
【NuxtJs】不存在路由重定向至404页面
Write less，do more
12-17 3251
一：项目上线以后发现404页面没有配置 情况：如果进入到了不存在的页面log会提示404 这个时候我们就需要一个404页面 二：根目录下创建middleware文件夹 中新建 unknownRoute.js 代码如下： /** * 未知路由重定向 404页面 */ export default ({store, route, redirect}) => { if (!route.matched.length) { redirect('/404') } } 三：去nuxt
.nuxt框架开发pc 配置404页面
weixin_50678132的博客
09-23 1618
.nuxt框架开发pc 配置404页面 layouts 这个文件是框架自带的，可以直接创建一个子文件名字为error 具体错误内容自己定 <template> <div class="col-md-6 align-self-center"> <h1>404</h1> <h2>UH OH! 页面丢失</h2> <p>您所寻找的页面不存在。你可以点击下面的按钮，返回主页。
NUXT3 单例应用模式 发布到nginx 访问正常刷新404 问题解决方案
GFStong的博客
06-26 1526
1、假设现在在浏览器上的url为 172.1.2.3:7000/test ，此时刷新页面时候会去根据浏览器上的url去服务器（nginx）上面请求对应的静态资源，nginx根据location / 的匹配规则在dist文件夹里没有找到对应的静态文件"test"，所以返回404，合理。所以当你点击跳转时候，有时候你代码用的是push（不刷新）、有时候用的是a标签、Link（刷新），才导致这个问题。链接：https://www.jianshu.com/p/d9342c2cc02e。可自行在浏览器上面试下。
Nuxt.js - 最新自定义报错、缺省、404、500 定制化 error.vue（页面、接口报错时自动跳转到该自定义页面）支持自定义文案、状态码等功能
王佳斌
10-03 3859
Nuxt.js 最新自定义报错、缺省、404、500 定制化 error.vue（页面、接口报错时自动跳转到该自定义页面）支持自定义文案、状态码等功能，NUXT报错后怎么跳转到自己定义的错误页面去，页面直接报错了怎么办能不能跳转到指定的404页面，Nuxt出现Server error的解决方案!定制 error.vue 错误缺省页，写项目时增加错误提示页面操作，Nuxt.js自定义错误页，错误提示页写项目时增加错误提示页面操作，自定义错误页，nuxtjs 自定义服务端错误页面Server error pag
nuxt3 动态路由多个参数
08-17
Nuxt.js是一个基于Vue.js的服务端渲染框架，它可以帮助我们快速搭建高性能的网站。在Nuxt.js中，我们可以使用动态路由来传递参数。 当我们需要传递多个参数时，可以在Nuxt.js的路由配置文件（nuxt.config.js）中使用动态路由。具体步骤如下： 1. 打开nuxt.config.js文件，在其中找到routes选项。 2. 在routes选项中，我们可以定义一系列的route对象来配置不同的路由。 3. 在每个route对象中，使用path属性来定义路由的路径。在路径中，可以使用冒号（:）来指定参数的位置。 4. 使用params属性来指定该参数的名称。 例如，我们希望创建一个动态路由，其中包含两个参数：category和id。我们可以像下面这样配置路由： ```js export default { routes: [ { path: '/post/:category/:id', component: '~/pages/post.vue' } ] } ``` 在这个示例中，路由的路径是`/post/:category/:id`，其中冒号后面的部分表示参数的位置。我们可以在实际访问该路由时，将具体的参数替换到路径中，例如`/post/vuejs/123`。 在页面组件中，我们可以通过`this.$route.params`来访问传递的参数。在上面的示例中，我们可以在`~/pages/post.vue`组件中使用`this.$route.params.category`和`this.$route.params.id`来获取对应的参数值。 总结起来，使用Nuxt.js的动态路由多个参数的步骤包括在nuxt.config.js文件中配置路由，设置路由的路径和参数名称，然后在页面组件中通过`this.$route.params`获取参数的值。通过这种方式，我们可以轻松地处理多个参数的动态路由。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值