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. PPT 动画入门

    元素动画 进入动画 元素从无到有的过程 退出动画 元素从有到无的过程 退出动画和进入动画,一对一 强调动画 在元素上变化的过程(如放大) 动作路径 3D动画 三维动画 低版本不支持 组合动画 切换动画 ...

  2. Docker SpringBoot Skywalking 8.1 agent

    下载源码包:https://archive.apache.org/dist/skywalking/8.1.0/ -- 创建存放目录 mkdir -p /opt/skywalking -- 进入目录 c ...

  3. 微服务网关 —— SpringCloud Netflix Zuul

    概述 Spring Cloud Zuul 是 Spring Cloud Netflix 子项目的核心组件之一,可以作为微服务架构中的 API 网关使用,有以下用途: 鉴权:对于访问每个服务的请求进行鉴 ...

  4. JSP 学习笔记 | 五、MVC模式和三层架构 & JSP 案例实战

    前文:JSP 学习笔记 | 四.JSP标准标签库(JSTL)个人使用指南 前文:JSP 学习笔记 | 三.EL 表达式简述 前文:JSP 学习笔记 | 二.JSP 脚本 & 案例实现 & ...

  5. JSP | Web 应用开发概述

    原作者为 RioTian@cnblogs, 本作品采用 CC 4.0 BY 进行许可,转载请注明出处. 前文提示,本文基于 <JSP 应用开发与实践>-- 刘乃琦老师的书籍以及 C语言中文 ...

  6. WebGPU光追引擎基础课:使用WebGPU绘制三角形

    大家好~我开设了"WebGPU光追引擎基础课"的线上课程,从0开始,在课上带领大家现场写代码,使用WebGPU开发基础的光线追踪引擎 课程重点在于基于GPU并行计算,实现BVH构建 ...

  7. Python异步编程原理篇之协程的IO

    协程的IO asyncio 作为实现异步编程的库,任务执行中遇到系统IO的时能够自动切换到其他任务.协程使用的IO模型是IO多路复用.在 asyncio 低阶API 一篇中提到过 "以Lin ...

  8. 解决Xshell/Xftp提示“要继续使用此程序必须应用到最新的更新或者新版本”(临时规避和彻底解决方案)

    一.xshell与xftp登录时提示,但是更新却又每次都失败,无法登录 二. 临时规避方案:手动修改日期为1年前,问题解决软件可以打开,但是每次启动都要手动修改,甚是麻烦  三.彻底解决方案,修改xs ...

  9. QT启动问题--找不到python36.dll-cnblog

    1.报错:找不到python36.dll 2.解决 通过该查询CSDN下载相应的python36.dll放到C:\Windows\System32目录下即可 https://blog.csdn.net ...

  10. Go-类型推导