位置: 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文件中怎么写)

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

  • 电脑温度高怎么解决(电脑温度)(电脑温度过高自动关机怎么解决)

    电脑温度高怎么解决(电脑温度)(电脑温度过高自动关机怎么解决)

  • 2022年颜值最高的手机为什么是苹果13(2022年颜值最高AJ)

    2022年颜值最高的手机为什么是苹果13(2022年颜值最高AJ)

  • 钉钉匿名投票真的是匿名的么(钉钉 匿名投票)

    钉钉匿名投票真的是匿名的么(钉钉 匿名投票)

  • 拼多多没有违规词为什么要考试(拼多多没有违规记录为什么限制推广)

    拼多多没有违规词为什么要考试(拼多多没有违规记录为什么限制推广)

  • 怎么让抖音里出现歌词(怎么让抖音出现弹幕)

    怎么让抖音里出现歌词(怎么让抖音出现弹幕)

  • 算法一般都可以用哪几种控制结构组合而成(算法一般都可以由顺序循环嵌套的控制结构组合而成)

    算法一般都可以用哪几种控制结构组合而成(算法一般都可以由顺序循环嵌套的控制结构组合而成)

  • 打印机打一张停顿一下(打印机打一张停好久,才会打下一张)

    打印机打一张停顿一下(打印机打一张停好久,才会打下一张)

  • 小米ota卡有什么用(小米ota卡怎么样)

    小米ota卡有什么用(小米ota卡怎么样)

  • 微信在wifi下无法连接(微信在无线网络不能用怎么回事)

    微信在wifi下无法连接(微信在无线网络不能用怎么回事)

  • ipad充电半天还是红色(ipad充半天还是1)

    ipad充电半天还是红色(ipad充半天还是1)

  • 微信商城和小程序商城有哪些不同(微信商城小程序定制)

    微信商城和小程序商城有哪些不同(微信商城小程序定制)

  • 主板亮黄灯无法开机(主板亮黄灯无法上网怎么办)

    主板亮黄灯无法开机(主板亮黄灯无法上网怎么办)

  • oppo有红外遥控功能吗(oppo红外遥控在哪)

    oppo有红外遥控功能吗(oppo红外遥控在哪)

  • 快手小店pid是什么(快手小店pid是什么意思怎么绑定)

    快手小店pid是什么(快手小店pid是什么意思怎么绑定)

  • 手机投屏到电视怎么找不到设备(手机投屏到电视上怎么操作)

    手机投屏到电视怎么找不到设备(手机投屏到电视上怎么操作)

  • qq发群消息别人看不见(qq群发消息别人看不到如何解除)

    qq发群消息别人看不见(qq群发消息别人看不到如何解除)

  • mate30照相功能(华为mate305g照相功能)

    mate30照相功能(华为mate305g照相功能)

  • 笔记本ss接口是干嘛的(笔记本ss接口是usb接口吗)

    笔记本ss接口是干嘛的(笔记本ss接口是usb接口吗)

  • 知道手机号怎么查抖音号(知道手机号怎么查qq号)

    知道手机号怎么查抖音号(知道手机号怎么查qq号)

  • 三星手机怎么截图(三星手机怎么截屏长图)

    三星手机怎么截图(三星手机怎么截屏长图)

  • air3是ipad几代(苹果平板air3是第几代)

    air3是ipad几代(苹果平板air3是第几代)

  • 如何打开USB调试模式(如何打开usb调试模式oppo)

    如何打开USB调试模式(如何打开usb调试模式oppo)

  • 什么是白条分期免息(白条分期的条件)

    什么是白条分期免息(白条分期的条件)

  • 在WIN10中,为什么快速启动栏不见了?(为什么我的windows10)

    在WIN10中,为什么快速启动栏不见了?(为什么我的windows10)

  • rundll32.exe应用程序错误的解决方法(rundll32.exe应用程序错误 win7)

    rundll32.exe应用程序错误的解决方法(rundll32.exe应用程序错误 win7)

  • nodejs——解决跨域问题(node.js解决跨域请求)

    nodejs——解决跨域问题(node.js解决跨域请求)

  • 织梦模板DEDEcms设置相关文章投票的教程(织梦模板安装完整教程)

    织梦模板DEDEcms设置相关文章投票的教程(织梦模板安装完整教程)

  • 宁波财税网会计之窗官网
  • 公司名称变更期间可以投标吗
  • 服务不动产扣除项目怎么填
  • 工会经费需要计税吗
  • 国外客户付款方式
  • 固定资产特性
  • 公司接受投资会计科目
  • 工会的会费收入如何记账
  • 公司补贴怎样做分录?
  • 补开的银行手续费发票怎么做账
  • 退税降低
  • 电力安装工程合同范本
  • 建筑图纸设计费包括晒图费吗
  • 进项发票税点属于什么科目?
  • 营改增后发票报销管理规定是怎样的?
  • 零申报还需要交税吗
  • 资产委托经营管理合同
  • 长期股权投资计提减值准备
  • 小规模纳税人月销售额不超过10万免征
  • 支付测量费的补贴费用怎么记账
  • 预缴地实现的月销售额未超过
  • 业务招待费有增值税吗
  • 无经营零申报公司注销要交印花税吗
  • 在windows7提供了一种什么技术
  • 房产税存在往期未申报信息怎么处理
  • 普通年金的概念和内涵
  • 为员工购买的团员保险
  • 长期债权投资收回的利息 现金流量表
  • 应付债券借贷
  • 厂房出租租金要交多少税
  • 城建税申报表怎么作废
  • 当月工资个税怎么算
  • 员工离职后公司还用照片
  • 长期债权投资收回的利息 现金流量表
  • 长期股权投资初始投资成本和入账价值
  • 货运代理开票
  • 如何自己搭建一个邮箱服务器
  • web无法运行
  • 浅析人物形象的论文开题报告
  • php自动提交表单
  • php socket_create
  • 注意力机制加在CNN的什么位置
  • Python人脸识别智能考勤系统 (供源码,附报告)(可答疑,可调试)
  • 采购和销售都做的叫什么
  • 供热企业税收优惠
  • 事业单位收入入账
  • wordpress 批量添加标签
  • mysql中事务的作用
  • 作废的增值税普通发票怎么处理
  • 出售固定资产的损失计入什么科目
  • 哪些所得需要去税务登记
  • 固定资产错记到费用了怎么办
  • 建筑行业工程施工当月可以不结转吗
  • 什么叫误餐费
  • 房租已支付未收到发票可以做费用吗
  • 应付账款和应付票据的区别与联系
  • 发票要不回来怎么办
  • 银行回单借贷标志贷表示什么
  • sqlserver r服务
  • winxp搜索文件内容搜不出来
  • 如何使用xp
  • 新买的苹果电脑没有电
  • 自动批处理文件的名字是什么
  • win7系统电脑图标不见了
  • xp系统自动锁定
  • linux安装.sh
  • javascript编程规范
  • 一系列优秀的Android开发资料
  • (翻译)你最好骑一辆共享单车
  • 编写自己的linux系统
  • python爬取csdn
  • python中安装模块的命令
  • python ints
  • python多线程例子
  • python发送短信到手机
  • js选中div
  • 手把手教你打造一个花灯笼,老师看到肯定惊喜
  • android view view
  • 地税网上办税服务厅
  • 个人所得税选择那种方式更好
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设