位置: IT常识 - 正文

vue3动态路由刷新后空白或者404(vue2动态路由)

编辑:rootadmin
vue3动态路由刷新后空白或者404 前言

推荐整理分享vue3动态路由刷新后空白或者404(vue2动态路由),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0动态路由,解决vue动态路由刷新问题,vue3动态路由刷新,vue3动态路由刷新,vuerouter动态路由,解决vue动态路由刷新问题,vue3动态路由刷新丢失,vue3动态路由刷新,内容如对您有帮助,希望把文章链接给更多的朋友!

之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~ 之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "^3.2.5"重新写一个吧。 本文章是看了其它杂七杂八的博客,自己排错后编写下,不容易啊

实现首先在store\index.js文件编写import { createStore } from 'vuex'export default createStore({ state: { menu_lists: [] //菜单 }, getters: { account(state) { return state.menu_lists // 读取菜单列表 } }, mutations: { // 增加菜单 menuAdd(state, n) { if (state.menu_lists.length == 0) { state.menu_lists.push(n) } else { if (state.menu_lists.some(menu => menu.id!= n.id)) { state.menu_lists.push(n) } } }, // 清空菜单 menuDelect(state) { state.menu_lists.length = 0 } }, actions: { menu_add({ commit }, data) { commit('menuAdd', data) },// 登出时调用将菜单数据删除 menu_delect({ commit }) { commit('menuDelect') } }, modules: { }})接着在App.vue编写vue3动态路由刷新后空白或者404(vue2动态路由)

原因: 刷新时,动态路由需要重新挂载到路由实例, 但是在App.vue中调用init方法去初始化,并不能解决,因为App.vue属于路由的根,还未进入就被通配符拦截到404页面了, 我就在根上退出时将菜单保存在sessionStorage

// 创建完毕状态 created() {//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$store.replaceState( Object.assign( {}, this.$store.state, JSON.parse(sessionStorage.getItem("store")) ) ); } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.removeItem("store"); sessionStorage.setItem("store", JSON.stringify(this.$store.state)); }); }读取后端菜单文件进行处理下

根据实际修改 vueRouter4中移除了addRouters,所以只能通过addRouter进行路由的动态添加

import { useRouter } from "vue-router";import { useStore } from "vuex";export default defineComponent({setup() {const store = useStore();const router = useRouter();// 路由数据重新封装 function routerPackag(routers) { let accessedRouters = routers.filter((itemRouter) => { if (itemRouter.component != "Layout") { //处理组件---重点 router.addRoute("base", { path: `/${itemRouter.path}`, name: itemRouter.name, component: () => import(`@/${itemRouter.component}`), }); // 通过sessionStorage排查菜单是否存储,避免刷新后重复添加 if (!sessionStorage.getItem("store")) { store.dispatch("menu_add", itemRouter); } } //存在子集 if (itemRouter.children && itemRouter.children.length) { routerPackag(itemRouter.children); } return true; }); return accessedRouters; } })}主要的来了,可以main或者router\index编写(我是在router\index编写的)

1、刷新404:将匹配全部为定义路径到404的路由从静态路由表中去除,在动态权限路由都添加了之后在添加。 2、刷新白屏:如果是在路由守卫router.beforeEach中检测并用router.addRoute添加的路由,则需要将动态权限路由添加后的next()放行,改为next({ path: ${to.path} })触发新导航。

import { createRouter, createWebHashHistory } from 'vue-router'import store from "../store";import { ref } from 'vue'const routes = [ { path: '/login', name: 'login', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import( /* webpackChunkName: "Login" */ '../views/ant_login.vue'), meta: { requireAuth: false, }, }, { path: '/', name: 'base', component: () => import( /* webpackChunkName: "Login" */ '../views/ant_base.vue'), meta: { requireAuth: true, }, children: [ { path: 'index', name: 'home', redirect: "/map", component: () => import( /* webpackChunkName: "Login" */ '../views/ant_home.vue'), } ] }, { name: "NotFont", path: '/:pathMatch(.*)*', component: () => import('../components/NotFont.vue'), alias: '/404', // 别名 hideMenu: true }]const router = createRouter({ history: createWebHashHistory(), //createWebHashHistory是hash模式 // 页面刷新白屏问题 // mode取值说明: // histroy:URL就像正常的 url,示例:http://localhost:8080/home // hash:默认值,会多一个“#”,示例:http://localhost:8080/#/home // abstract”:url不变示例:http://localhost:8080 // mode: 'history', base: process.env.BASE_URL, routes})// 下面全局前置路由守卫可在main文件编写const registerRouteFresh = ref(true) // 定义标识,记录路由是否添加router.beforeEach(async (to, from, next) => { if (registerRouteFresh.value && store.state.menu_lists.length > 0) { router.removeRoute("NotFont") await store.state.menu_lists.forEach(e => { // // 处理组件---重点 router.addRoute("base", { path: `/${e.path}`, name: e.name, component: () => import(`@/${e.component}`), }); }) registerRouteFresh.value = false // next({ ...to, replace: true }) next({ path: `${to.path}` }) } else { router.addRoute(router.options.routes[2]) next() }})// 全局后置钩子-常用于结束动画等router.afterEach(() => { //不接受next});export default router登出页面需要清除缓存import { useStore } from "vuex";export default defineComponent({setup() {const store = useStore()function Logout() {// 将vuex的菜单数据删除store.dispatch("menu_delect"); window.sessionStorage.clear() })}排错过程

心累不说看了那些博客了真是大海捞个针,博客太杂了,有的写的next({ …to, replace: true })我就想知道你是咋成功的,哎,排的有好的但不实用,排到垃圾就不想说了,连使用的组件都没有就光把一段代码粘贴上去,累累累😫

期望

码友们有啥更简单的方式实现前端动态路由刷新后能正常显示刷新前页面欢迎评论分享

本文链接地址:https://www.jiuchutong.com/zhishi/288127.html 转载请保留说明!

上一篇:在一个JS文件中引用另一个JS文件中的变量(在一个js文件中怎么写)

下一篇:阳澄湖大闸蟹的做法[有图](阳澄湖大闸蟹的功效和作用)

  • 苹果电脑装windows7多少钱(苹果电脑装windows7)(苹果电脑装windows后没声音)

    苹果电脑装windows7多少钱(苹果电脑装windows7)(苹果电脑装windows后没声音)

  • 纸质版文字转换成word电子版(纸质版文字转换成word电子版软件)

    纸质版文字转换成word电子版(纸质版文字转换成word电子版软件)

  • 华为nova4e是哪年出的(华为nova4e是什么时候上市的,价格多少?)

    华为nova4e是哪年出的(华为nova4e是什么时候上市的,价格多少?)

  • 微信开启悬浮窗的方法是什么(微信开启悬浮窗口)

    微信开启悬浮窗的方法是什么(微信开启悬浮窗口)

  • 怎么把微博水印放下面(怎么把微博水印关掉)

    怎么把微博水印放下面(怎么把微博水印关掉)

  • 微博钱包支付密码怎么设置(微博钱包支付密码是哪个密码)

    微博钱包支付密码怎么设置(微博钱包支付密码是哪个密码)

  • PPT怎么在第二张幻灯片前新建一张幻灯片(ppt怎么把第二张换到第一张)

    PPT怎么在第二张幻灯片前新建一张幻灯片(ppt怎么把第二张换到第一张)

  • vivo手机录视频没有声音怎么办(vivo手机录视频在哪里找)

    vivo手机录视频没有声音怎么办(vivo手机录视频在哪里找)

  • win10鼠标移动方向相反(win10鼠标自动移动到窗口边缘)

    win10鼠标移动方向相反(win10鼠标自动移动到窗口边缘)

  • 主板typec接口能干嘛(主板的typec)

    主板typec接口能干嘛(主板的typec)

  • 为什么抖音直播看不到音浪(为什么抖音直播间打字别人看不见)

    为什么抖音直播看不到音浪(为什么抖音直播间打字别人看不见)

  • qq字符怎么开启(qq字符在哪打开)

    qq字符怎么开启(qq字符在哪打开)

  • 为什么看不到主播的本场音浪(为什么看不到主页访客)

    为什么看不到主播的本场音浪(为什么看不到主页访客)

  • 快手投屏怎么用(快手投屏怎么用手机)

    快手投屏怎么用(快手投屏怎么用手机)

  • 小米6x支不支持qc3.0

    小米6x支不支持qc3.0

  • ipad怎么看电视直播(ipad怎么看电视剧)

    ipad怎么看电视直播(ipad怎么看电视剧)

  • 手机怎么更改软件名字(手机怎么更改软件默认打开的浏览器)

    手机怎么更改软件名字(手机怎么更改软件默认打开的浏览器)

  • airpods2充电盒多久充满(airpods2充电盒多重)

    airpods2充电盒多久充满(airpods2充电盒多重)

  • 微信置顶的字怎么设置(微信置顶上面的字)

    微信置顶的字怎么设置(微信置顶上面的字)

  • 苹果8横屏竖屏怎么设置(苹果横屏竖屏失灵)

    苹果8横屏竖屏怎么设置(苹果横屏竖屏失灵)

  • 手机一打电话就通话结束(手机打电话就没网络是怎么回事)

    手机一打电话就通话结束(手机打电话就没网络是怎么回事)

  • wpsword怎么加链接(wps怎么放链接)

    wpsword怎么加链接(wps怎么放链接)

  • Windows11如何提高游戏性能?Win11游戏高性能模式设置步骤(win11有哪些提升)

    Windows11如何提高游戏性能?Win11游戏高性能模式设置步骤(win11有哪些提升)

  • 详解Python中的JSON编码模块(python jsdom)

    详解Python中的JSON编码模块(python jsdom)

  • php框架有哪些(php的框架)

    php框架有哪些(php的框架)

  • 免费下载海洋CMS高防7kb影视网站模板-OK源码(海洋cms有安卓版下载)

    免费下载海洋CMS高防7kb影视网站模板-OK源码(海洋cms有安卓版下载)

  • 年底企业所得税计提少了
  • 税务会计账务处理
  • 电子发票字迹不清怎么办
  • 企业所得税1季度申报季初从业人数个税所属期12月
  • 业务招待费税前扣除比例
  • 在账务处理过程中,最关键的环节是
  • 劳务外包要通过应付职工薪酬吗
  • 不动产修理领用原材料账务处理?
  • 公司注销固定资产交什么税
  • 企业债务重组的案例
  • 手工开具发票
  • 契税计税依据是否包含耕地占用税
  • 税控设备指什么
  • 发票联给错怎么办?
  • 电信话费可以开公司发票吗
  • 无形资产摊销表模板
  • 审计的内容是什么
  • 银票贴现需要发票嘛
  • 未抵扣完的进项税额可以跨年抵扣吗
  • 1697508991
  • 一般纳税人附加税费减免政策
  • 劳务费个税扣税
  • 系统安装的步骤
  • php中的函数可以分为哪几种
  • 企业车辆按揭的利弊分析
  • 交房产税要带身份证嘛
  • 未实缴出资的股权转让后还要承担法律后果吗
  • PHP:pg_result_error()的用法_PostgreSQL函数
  • 手机怎么设置无信号
  • 补收入的会计分录
  • 非居民企业股权转让特殊性税务处理
  • php如何使用
  • 固定资产以前年度未入账怎么处理
  • uniapp中使用amap-vue,设置安全密钥
  • Python 计算机视觉(八)—— OpenCV 进行图像增强
  • 3d点云处理算法
  • ping命令可以用来测试什么
  • 狂神说css笔记
  • 折扣方式销售有哪些类型
  • python用内置函数来打开文件
  • 上市公司财报中的销售费用多少合适
  • 工业企业应收应付会计怎样
  • 资产负债表中应收账款的计算公式
  • 转让全部探明矿权合法吗
  • 电脑耗材发票税点多少
  • 展会门票怎么入账
  • wordpress限制下载次数
  • 学电脑的网站
  • 销售自己使用过的物品
  • 网上变更财务负责人新负责人要确认吗
  • 公司购买办公楼需要缴纳城镇土地使用税吗
  • 什么是全面一次性奖金
  • 报关单保费率怎么填
  • 银行存款日记账电子表格模板
  • sql死锁的简单例子
  • 固定资产一次性扣除怎么做账
  • 仓储费计入哪个部门的费用
  • 记账凭证原始凭证回单的粘贴顺序
  • 房产税什么时候开始征收2023
  • 如何设置物资采集系统
  • rpm方式安装samba软件
  • sql server使用教程(图文)
  • windows.h在linux中
  • ubuntu怎样调出命令行
  • win7桌面图标靠右
  • Debian如何安装网卡驱动
  • 建立批处理命令
  • js中的正则表达式的例子
  • vue组件精讲
  • javascript怎么做
  • jquery做下拉
  • androidstudio如何放大代码
  • 安卓监听功能
  • 税务总局电子申报软件39
  • 去哪儿网客服电话怎么转人工
  • 一年内在两家公司任职个税汇算清缴
  • 党建与内控合规风险防范相融合
  • 城镇土地使用税的计算公式
  • 税费银联缴款
  • 河北电子税务局怎么使用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设