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

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

  • ppa-al20是华为什么型号(ppaal20是华为什么型号手机多少钱)

    ppa-al20是华为什么型号(ppaal20是华为什么型号手机多少钱)

  • 闲鱼怎么取消芝麻信用授权(闲鱼怎么取消芝麻应用授权)

    闲鱼怎么取消芝麻信用授权(闲鱼怎么取消芝麻应用授权)

  • 快手的查找功能不见了怎么办(快手的查找功能在哪里)

    快手的查找功能不见了怎么办(快手的查找功能在哪里)

  • 流量MB多还是GB多(流量mb多还是少)

    流量MB多还是GB多(流量mb多还是少)

  • 百家号账号状态异常怎么办(百家号账号状态怎么看)

    百家号账号状态异常怎么办(百家号账号状态怎么看)

  • 未发货退款多久能到账(没发货申请退款后多久会自动退款)

    未发货退款多久能到账(没发货申请退款后多久会自动退款)

  • 为什么芒果TV不显示弹幕(为什么芒果tv不能投屏)

    为什么芒果TV不显示弹幕(为什么芒果tv不能投屏)

  • 腾讯会议直播上课老师可以看见学生吗(腾讯会议直播上课能看到学生吗)

    腾讯会议直播上课老师可以看见学生吗(腾讯会议直播上课能看到学生吗)

  • word把格式化分为哪三类(word把格式化分为什么等三类)

    word把格式化分为哪三类(word把格式化分为什么等三类)

  • 机顶盒是猫吗(机顶盒是不是猫)

    机顶盒是猫吗(机顶盒是不是猫)

  • iphone11处理器(iphone11处理器是a几)

    iphone11处理器(iphone11处理器是a几)

  • 为什么apple id老是要验证(为什么apple id老是异地登录)

    为什么apple id老是要验证(为什么apple id老是异地登录)

  • 微信绑定qq失败的原因(微信怎么更换绑定手机号)

    微信绑定qq失败的原因(微信怎么更换绑定手机号)

  • 小米智能手表能插卡吗(小米智能手表能看小说吗)

    小米智能手表能插卡吗(小米智能手表能看小说吗)

  • 抖音的数据中心在哪里(抖音的数据中心账号搜索量准确吗)

    抖音的数据中心在哪里(抖音的数据中心账号搜索量准确吗)

  • 手机充电为什么一直1%(手机充电为什么会充一下停一下)

    手机充电为什么一直1%(手机充电为什么会充一下停一下)

  • realmex2pro支持NFC吗(realmex2pro支持wifi6吗)

    realmex2pro支持NFC吗(realmex2pro支持wifi6吗)

  • qq音乐下载后会员过期歌曲会失效吗(qq音乐下载后会员过期歌曲)

    qq音乐下载后会员过期歌曲会失效吗(qq音乐下载后会员过期歌曲)

  • 苹果怎样用q币充黄钻(苹果怎样用q币充值qq会员)

    苹果怎样用q币充黄钻(苹果怎样用q币充值qq会员)

  • WPS文档怎么自动生成目录(wps文档怎么自动换行)

    WPS文档怎么自动生成目录(wps文档怎么自动换行)

  • 微信小程序如何在电脑上打开(微信小程序如何更新)

    微信小程序如何在电脑上打开(微信小程序如何更新)

  • 支付宝花呗还款日怎么修改(支付宝花呗还款顺序怎么设置)

    支付宝花呗还款日怎么修改(支付宝花呗还款顺序怎么设置)

  • 怎么增加c盘空间(怎么增加c盘空间容量)

    怎么增加c盘空间(怎么增加c盘空间容量)

  • CSS盒子居中的6种方法!(css盒子如何居中)

    CSS盒子居中的6种方法!(css盒子如何居中)

  • 基于Selenium+Python的web自动化测试框架(附框架源码+项目实战)(基于Selenium的自动化测试平台设计与实现)

    基于Selenium+Python的web自动化测试框架(附框架源码+项目实战)(基于Selenium的自动化测试平台设计与实现)

  • 房产税什么时候落地
  • 纳税申报期限是纳税期限期满后的时间
  • 公司卖东西怎么开票
  • 固定资产的处理包括
  • 税金计提多了,交少了怎么处理
  • 电子发票密码区显示不全
  • 城市维护建设税怎么做分录
  • 企业所得税公益捐赠扣除限额
  • 公积金贷款购房后可以提取公积金吗
  • 实际利率法的计算过程
  • 废气处理工程会计分录
  • 税法规定固定资产折旧残值率
  • 印花税法律制度规定不征收印花税的是什么
  • 应交印花税会计分录
  • 个人销售货物缴纳增值税吗
  • 小规模纳税人是小微企业吗
  • 农产品收购发票上的买价含税吗
  • 关于促进房地产市场健康发展的实施意见(试行)
  • etc发票抵扣进项
  • 加工贸易的方式
  • 私募股权投资
  • 对个体工商户个人的认识
  • 收到预收款项
  • 计提社保公司承担部分的会计分录
  • mac文件权限限制怎么解决
  • 房屋租赁合同变更
  • macos monterey怎么降级
  • 保护地址是什么意思
  • windows11怎么设置默认应用
  • 支付的测试流程
  • PHP:curl_error()的用法_cURL函数
  • 发票已认证当月未申报怎么办
  • 企业预付工程车租赁费
  • php linux常用命令
  • 结转以前年度本年利润会计分录
  • set0
  • php curl file_get_contents
  • 怎么把html做成app
  • 金税盘税务申报流程
  • 工程施工企业收入1750万,利润怎么算
  • 实收资本是什么科目
  • 装修费用应该计入什么科目
  • 研发部门的房租可以资本化
  • 受托加工的成本
  • 办公室装修费计入长期待摊费用
  • 可转换债券的转换比率计算公式
  • 企业如何运用内部招募
  • 员工体检费计入什么会计科目里
  • 销售发票已开进项发票未收到怎么处理?
  • 纳税人的住房租金专项
  • 购买金税盘的分录
  • 坏账准备怎么计提比例
  • 记账凭证填制的心得体会
  • mysql使用入门
  • sql语句实现查询示例
  • 微软补丁修复时出现蓝屏现象
  • xp系统删除文件反应很慢
  • win2008 R2 与SP1 PS2无法安装操作系统补丁的解决办法
  • win8安装win10驱动
  • Ubuntu远程桌面连接
  • linux中使用grep命令显示包含特殊字符的行
  • sendmail -t
  • 如何在windows上打开蓝牙
  • linux远程更新程序
  • 解决出现的问题下一句,欢迎的语气
  • 嗌中怎么读
  • unity3d4个脚本
  • 浅析我国国防现状
  • angular 图片懒加载
  • javascript代码写在哪个标签里
  • javascriptz
  • 浏览器app测试要点
  • 对于javascript理解
  • android开发—01开发环境的搭建
  • mac解析域名
  • 山东省地方税务局印花税核定征收管理办法
  • 税务局有事业单位编制吗
  • 继续教育学时申报是什么意思
  • 跨县调动工作流程
  • 大专学费减免多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设