1.如果你的静态路由最后有如下代码:

  // 404 page must be placed at the end !!!
{ path: "*", redirect: "/404", hidden: true },

2.如果你的路由有一部分是动态获取的话,刷新页面会路由到404页面,404页面一定要放在最后,动态路由 addRoutes 之后,需要重新添加一下404页面,如下:

在 router.js 页面:

export const error404 = { path: "*", redirect: "/404", hidden: true };

3.在动态路由逻辑里一般是permission.js

import router from "./router";

import { error404 } from "./router";

router.addRoutes([...asyncRouter, error404]);

vue 动态路由刷新页面404的更多相关文章

  1. vue-router动态路由 刷新页面 静态资源没有加载的原因

    在做项目的时候,发现刷新页面的时候,静态路由没有加载,度娘了一圈,终于解决了. vue-router使用history模式+使用嵌套路由: 访问路由和嵌套路由页面,显示正常,但是刷新页面的时候,嵌套路 ...

  2. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  3. vue 动态路由添加的问题

    vue3中在router/index.js中 import { createRouter, createWebHistory } from 'vue-router'; import store fro ...

  4. vite2.9 + vue3.2 打包部署到nginx上刷新页面404问题

    vite2.9 + vue3.2 打包部署到nginx上刷新页面404问题 在本地运行没问题,部署到服务器上,能正常访问,但是刷新之后页面404 原有的Nginx配置为: server { liste ...

  5. antdpro 打包部署后访问路由刷新后404

    antdpro build 后访问路由刷新后 404? 解决方法有三种: 1. 改用 hashHistory,在 .umirc.js或者是config.js 里配 history: 'hash' 2. ...

  6. Vue 部署单页应用,刷新页面 404/502 报错

    在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...

  7. vue通过路由实现页面刷新

    vue 开发微信商城项目,需求如下: 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非 ...

  8. vue下使用nginx刷新页面404

    nginx 是一个代理的服务器.出现的问题:写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404,并且从其他页面跳转可以看到但是刷新页面就404.解决方法:在文件中的 ...

  9. vue 后退不刷新页面

    使用 this.$router.push({path: '/aichat'})路由跳转方式跳转页面 要实现 home => chat  chat页面刷新: chat => report, ...

  10. vue自动路由-单页面项目(非build时构建)

    博客中自动路由的原理? 答:简单点说,就是在请求页面时,根据url进行动态添加路由. 与其它自动路由博客的区别? 目前网上的博客,一般都是在build的时候进行动态路由添加,而本博客,采用的是在获得u ...

随机推荐

  1. Buffer 缓冲区操作

    1.缓冲区分片在 NIO 中,除了可以分配或者包装一个缓冲区对象外,还可以根据现有的缓冲区对象来创建一个子缓冲区,即在现有缓冲区上切出一片来作为一个新的缓冲区,但现有的缓冲区与创建的子缓冲区在底层数组 ...

  2. linux tar解压命令总结

    把常用的tar解压命令总结下,当作备忘: -c:建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可 ...

  3. 【辅助工具】IDEA使用

    IDEA使用 快捷键 快捷键 alt+enter:代码错误智能提示 alt+up:上个方法 alt+down:下个方法 alt+1:快速定位到项目窗口,还可边按键盘输文件名查找文件 alt+F7:定位 ...

  4. Cursor,程序员的 AI 代码编辑助手

    相信大家都或多或少地听说过.了解过 chatGPT ,半个月前发布的 GPT-4 ,可谓是 AI 赛道上的一个王炸 那么今天咸鱼给大家分享一个开源的 AI 代码编辑器--Cursor,让各位程序员在编 ...

  5. C. Given Length and Sum of Digits... (贪心)

    https://codeforces.com/problemset/problem/489/C C. Given Length and Sum of Digits... You have a posi ...

  6. 【SpringBoot】 启动后会调用执行的方法的 (五种方式)

    在 SpringBoot 工程 启动后, 会调用执行方法的五种方式: 亲自测试, 按照执行顺序如下: 第一种: @Component public class SpringContext1 { @Po ...

  7. S3C2440移植uboot之裁剪和修改默认参数

      上一节S3C2440移植uboot之支持DM9000移植uboot支持了网卡驱动,这节裁剪和修改uboot默认参数 目录 uboot的环境参数 修改uboot的默认环境变量 查看 default_ ...

  8. 在Chrome中安装扩展程序

    场景:在Chrome中安装NetBeans Connector插件,将下载好的crx文件拖到扩展程序页面时,发现该插件并没有安装成功. 分析:浏览器默认禁用了拖入安装 .crx 扩展的功能,导致crx ...

  9. C# WPF侧边栏导航菜单(Dropdown Menu)

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  10. [转帖]3.3.6. 活跃会话历史报告SYS_KSH

    https://help.kingbase.com.cn/v8/perfor/performance-optimization/performance-optimization-6.html#sys- ...