1.首先在开始之前,我们要试试Vue router 支不支持动态加载.

经过测试

 

Vuex 里面支持这个,也就是意味着,这是可以从后台被加载的,这种数据.那么夜意味着我们可以动态生成路由.

动态生成路由,就是异维着我们需要,动态生成Vue 页面.

我们在一开始使用html的时候,使用过Vue.component.

那么我们面临两个问题.

1.页面怎么生成.

2.但是路由怎么请求

 

第一个问题,

两种解决问题的方法,

第一种就是,我们写一个模板,然后,我么在固定的位置,渲染固定的数据就好,不管直接通过后台,还是我们通过VUEX来存取数据.

第二种就是纯渲染,使用Vue.Component这样我们将从form获取的数据可以填充到template中.

第二个问题需要联系第一个问题

对于写了模板的,我们的路由是不成问题,但是他会面临的就是,不够灵活

第二个方法,使用Vue.component我们会发现,关键是这个组件怎么挂载上去,他是要挂载到新的.(替换原来的组件.)

不同的方法是有不同的解决方案.

第二个方法的问题在于,我们是添加,他一定是需要路由的,

那就只能选择第一种,

能不能两种方法结合呢?我想是有的.

那就给他们两种方法相互结合.

先使用模板,然后在模板里面挂载组件.这样就ok了.

使用全局组件.

经过测试,两种方法测试是不可能.

 

那么我们就采用第一种方法

第一步 , 通过读取一些权限的问题,获取当前用户的权限等级.

第一种方法:也就是在该用户登录的时候,我们可以将权限等级,存放在游览器的localstroage中或者其他的地方.

第二种方法:在用户提交用户名,账号密码的时候,我们给个权限.(存在被劫持的情况.我们如何返回正确的加密)基本https,中间人攻击.

 

第二步 我们要把组件和Vuex 分离

把权限等级的判断交给VUEX ,然后返回相应的数据.

然后在组件中,我们根据,权限等级,怼他进行相应的addRoutes

 

第三步

当我们转跳页面的时候, 路由不同,页面请求一样的模板.

多做几个模板

在转跳前,将相应的数据传送到Vuex,在转跳后,页面可以继续读取.这是在有router-view 的情况下.而且再次渲染,如果不转跳页面数据就会消失.{问题1}

问题2

Do not use built-in or reserved HTML elements as component id: template

不要给Vue 单文件使用template这样的文件.

在同级别情况下我们查看下情况.

同级别也是可以获取到的,

但是显示需要处理一下,刷新后失效的问题.{问题3}

这样子,把这些数据放在storage中,然后判断,没有就获取,有的话就不获取.

 

1.存在的问题

 

有刷新和无刷新

 

 

Logo

前往低代码交流专区

更多推荐