基于vue-admin-template的动态路由的问题解决

基于vue-admin-template的动态路由的问题解决

1.问题一:页面无法显示

控制台报如下错误:

首先经过一番网上搜索,有说是webpack的原因,调试后发现不是,然后再排查后台返回的组件地址。

由于我的前端拼接组件地址的代码如下:

html 复制代码
component:item.componentUrl === '#'? Layout: resolve => require([`@/views/${item.componentUrl}/index.vue`], resolve)

查看后台地址,错误原因即后台多加了个/,正确的组件地址为:

刚开始遇到此类问题时,总以为是前端是不是写法错误,不支持之类的,然而我调试的时候,将动态路由写死进行调试可以正确返回,故思考后台返回组件地址的问题。

问题二 :刷新白屏

参考了一下网上教程,代码如下:

javascript 复制代码
if (isShow) {
			isShow = false; // 第一次进入后修改,使第二次跳转
			// 判断第一次进入路由守卫
			const accessRoutes = await store.dispatch('permission/generateRoutes');
			//更新加载路由
			router.options.routes = store.getters.permission_routes;
			// 动态添加可访问路由
			router.addRoutes(accessRoutes);
			next({ ...to, replace: true });
		} else {
			next();
		}

注意:isShow = false 一定要在next({ ...to, replace: true })前面,否则还是白屏,我搞了好久,才发现是这个原因,累了。。。。

相关推荐
别拿曾经看以后~7 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死10 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试13 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人22 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人22 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR28 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香30 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969333 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai38 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc42 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter