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

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

  • 饼图怎么显示数据和百分比(饼图怎么显示数据标签)

    饼图怎么显示数据和百分比(饼图怎么显示数据标签)

  • win10有必要安装360吗(win10有必要安装360杀毒吗)

    win10有必要安装360吗(win10有必要安装360杀毒吗)

  • 小米10青春版充电器是多少w(小米10青春版充电充不进去)

    小米10青春版充电器是多少w(小米10青春版充电充不进去)

  • word文档取消兼容模式怎么办(word2003怎么取消兼容模式)

    word文档取消兼容模式怎么办(word2003怎么取消兼容模式)

  • 菜鸟裹裹寄件损坏的理赔是怎样(菜鸟裹裹寄件损坏)

    菜鸟裹裹寄件损坏的理赔是怎样(菜鸟裹裹寄件损坏)

  • 华为手机指纹选项没了(华为手机,指纹)

    华为手机指纹选项没了(华为手机,指纹)

  • 直播点赞有什么用(直播点赞有什么好处和坏处)

    直播点赞有什么用(直播点赞有什么好处和坏处)

  • 防尘塞对手机充电口有危害吗(防尘塞对手机有损害)

    防尘塞对手机充电口有危害吗(防尘塞对手机有损害)

  • 什么是村淘下单(如何使用村淘下单)

    什么是村淘下单(如何使用村淘下单)

  • 计算机高级语言的编译系统按软件分类是(计算机高级语言程序的运行方法有编译)

    计算机高级语言的编译系统按软件分类是(计算机高级语言程序的运行方法有编译)

  • 苹果手机不受控制乱点屏怎么办(苹果手机不受控制怎么办)

    苹果手机不受控制乱点屏怎么办(苹果手机不受控制怎么办)

  • 抖音怎么取消大量的赞(抖音怎么取消大学信息)

    抖音怎么取消大量的赞(抖音怎么取消大学信息)

  • 操作系统可以给用户提供什么(操作系统给编程人员的接口)

    操作系统可以给用户提供什么(操作系统给编程人员的接口)

  • 浏览器怎么改成兼容模式(浏览器怎么改成默认浏览器)

    浏览器怎么改成兼容模式(浏览器怎么改成默认浏览器)

  • 淘宝男号能改成女号吗(淘宝男号可以改为女号吗?)

    淘宝男号能改成女号吗(淘宝男号可以改为女号吗?)

  • wps表格怎么搜名字(wps表格搜名字)

    wps表格怎么搜名字(wps表格搜名字)

  • 云计算openstack是什么(openstack云计算管理平台)

    云计算openstack是什么(openstack云计算管理平台)

  • 手机qq自动回复咋关(手机QQ自动回复怎么取消)

    手机qq自动回复咋关(手机QQ自动回复怎么取消)

  • evga显卡是什么档次(为什么很少有人讨论evga的显卡)

    evga显卡是什么档次(为什么很少有人讨论evga的显卡)

  • 手机关机打微信还通吗(手机关机打微信电话开机后会显示吗)

    手机关机打微信还通吗(手机关机打微信电话开机后会显示吗)

  • 图虫app怎么保存图片(图虫的照片可以随意下载吗)

    图虫app怎么保存图片(图虫的照片可以随意下载吗)

  • 小红书如何删除笔记(小红书如何删除评论和@里的记录)

    小红书如何删除笔记(小红书如何删除评论和@里的记录)

  • 怎样安装ps软件(怎么安装ps软件步骤)

    怎样安装ps软件(怎么安装ps软件步骤)

  • Linux系统中怎么安装和使用ImageMagick软件?(Linux系统中怎么定位到java代码的方法级)

    Linux系统中怎么安装和使用ImageMagick软件?(Linux系统中怎么定位到java代码的方法级)

  • Vue3中的watch监听(vue中watch监听对象的变化)

    Vue3中的watch监听(vue中watch监听对象的变化)

  • PHPCMS不支持PHP7?(php_fileinfo不支持)

    PHPCMS不支持PHP7?(php_fileinfo不支持)

  • 个税申报数据有误,如何快速更正
  • 一般纳税人建筑工程税率是多少
  • 技术入股亏损如何清算
  • 当期处置子公司,当期还纳入合报范围嘛
  • 预收款结转收入怎么算
  • 企业因被盗丢失物品案例
  • 公司与公司之间合作协议
  • 去年福利费今年怎么算
  • 研发加计扣除税率
  • 开出转账支票用什么凭证
  • 私营独资企业需要做账吗
  • 卷式增值税发票校验码怎么查
  • 分公司开票总公司收款行吗
  • 股东个人所得税怎么申报
  • 此次新政策对原来就是小型微利企业的纳税人有影响吗?
  • 委托代付工程款会计分录
  • 发出商品发生损失
  • 税务稽查可以不罚款的情形
  • html5 video标签
  • win10点击添加账户没反应
  • 腾讯手游助手使命召唤怎么滑铲
  • 残保金零申报但是逾期未报
  • 营改增餐饮行业纳税规则
  • 支付宝花呗服务升级有什么用
  • win10 21h1正式版怎么样
  • 苹果多屏协同win10
  • 所有者权益的确认主要依赖于什么
  • wordpress邮箱怎么配置
  • 借支单怎么写才受法律保护
  • linux命令行怎么用
  • TCN(Temporal Convolutional Network,时间卷积网络)
  • 动态模型图如何制作
  • 动销率怎么看
  • thinkphp框架作用
  • springboot aop切面
  • 计算机视觉项目论文
  • 代扣代缴境外增值税时间
  • 暂估入库成本处理
  • windows 和 linux
  • 长期股权投资会计准则2021修订
  • 库存商品转出
  • 公司没有收入怎么办
  • 辞退补偿金的标准
  • 以前年度的费用发票怎么入账
  • 政府扶持资金怎么做账
  • 增值税发票开错冲红重开如何做会计分录?
  • 事业单位的财政拨款怎么做账
  • 建筑业异地预缴企业所得税怎么算
  • 融资租入固定资产的账务处理
  • 现金日记账支出写借方还是贷方
  • 车辆购置税完税证明图片
  • 职工医保门诊一年报销多少钱
  • 滴滴普通发票
  • 速动比率多少合适 视频
  • 总分类账建账顺序
  • 新会计准则捐赠收入
  • sqlserver按时间段导出数据
  • window放大之后怎么缩小
  • qq8.2.1版本下载正式版
  • 1sass.exe是什么程序
  • win10系统如何给d盘加密
  • win8系统怎么到桌面
  • 王牌竞速 小米
  • win10如何移动应用程序
  • windows蓝牙被禁用
  • cocos 源码
  • nodejs常用api
  • python程序的开发过程
  • cocos2d开发的知名游戏
  • [置顶]游戏名:chivalry2
  • vue3官方文档
  • shell脚本模拟ctrl
  • unity 3d ui
  • js如何实现重置功能
  • jQuery插件是什么
  • 个人工资扣税标准计算
  • 荆州市物业管理
  • 甘肃国家税务总局
  • 城镇土地使用税减免税政策
  • 薰衣草商业价值
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设