001------------将vue+element+admin本地路由,修改为动态路由(学习篇)

1、一般做后台管理系统,管理的东西要是不是很多,使用vue+element+admin就完全够用了。如下图这样,登录进去后直接进入后台
001------------将vue+element+admin本地路由,修改为动态路由(学习篇)_第1张图片
但是如果这个管理系统要管理的内容多,得区分一下模块,然后点击每个模块,进去后加载对应的路由。这种方式就不太行。得做成如下这种
001------------将vue+element+admin本地路由,修改为动态路由(学习篇)_第2张图片
点击组件系统,加载组件对应的路由,点击图表的加载图表的路由。
2、下一章开始,对element+admin项目进行修改,将其改为上面这种,点击对应模块,加载相应的路由。分为一下几个步骤:
<1>新建模块页面,添加模块页的路由,完成模块页的页面和对应的点击事件。
<2>修改路由导航守卫页面,判断何时获取路由数据,并处理获取数据的js。通过网址想直接进入后台进行权限管理。
<3>退出登录,点击个人中心,进入模块页,清除token,vuex中的数据
<4>修复F5强制刷新页面,动态路由数据丢失问题。修复点击进入动态路由页,再次退出登录,点击登录时,页面不跳转模块页问题。
3、下图是做好的动态路由部,查看图片
点击登录,进入模块页面
001------------将vue+element+admin本地路由,修改为动态路由(学习篇)_第3张图片
点击多级路由模块,加载对应路由
001------------将vue+element+admin本地路由,修改为动态路由(学习篇)_第4张图片
点击个人中心,退回模块页,点击图表模块,加载对应路由
001------------将vue+element+admin本地路由,修改为动态路由(学习篇)_第5张图片
echarts页面
001------------将vue+element+admin本地路由,修改为动态路由(学习篇)_第6张图片

你可能感兴趣的:(vue-router,web前端,vue.js,elementui)