我们在用vue做项目的时候,如果页面过多,会造成第一次加载的时候非常慢,因为一下子要加载的东西太多,今天我们来说说按需加载。
我们也会经常遇到,权限不同,显示的模块也会有差别,那么,怎么去做权限区分处理呢?
1.按需加载
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import News from '@/components/News'
// import Child from '@/components/child'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/index',
name: 'HelloWorld',
component: () => import('@/components/HelloWorld')
// component: HelloWorld
},
{
path: '/news',
name: 'news',
component: () => import('@/components/News')
// component: News
}
]
})
2.根据权限动态添加路由
动态添加路由的方法:
import routerTest from '../components/routerTest'
const modules = {
'purchase': [{
path: '/routerTest',
component: routerTest
}]
}
function _M() {
this.purchaseModule = []
/*
data: ['purchase',,,]
vm: 全局的vue对象
*/
this.checkModules = (data, vm) => {
vm.$router.init(vm)
data.forEach(key => {
this[`${key}Module`] = [...this[`${key}Module`], ...modules[key]];
// 动态添加
vm.$router.addRoutes(this[`${key}Module`])
})
// vm.$router.addRoutes([{
// path: '*',
// redirect: '/',//设置默认指向的路径
// name: 'default'
// }])
}
}
export default new _M
调用动态添加路由的方法:
var app = new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
import _M from "./router/module.js";
_M.checkModules(['purchase'], app);
至于权限不同的导航栏,可以先判断权限再渲染
以下是php的判断渲染,前端人员可用v-if的方式判断权限数据
<?php if($isAdmin || isset($permission['ErpPermission'])):?>
<li class='side-every'>
<h1 class='manage-all active'>ERP管理</h1>
<ul class='manage-list' style='display: none'>
<?php if($isAdmin || in_array(1,$permission['ErpPermission'])):?>
<li class='company'><a href='/company'>公司管理</a></li>
<?php endif;?>
<?php if($isAdmin || in_array(2,$permission['ErpPermission'])):?>
<li class='role_manage'><a href='/role_manage'>系统角色管理</a></li>
<?php endif;?>
</ul>
</li>
<?php endif;?>
<?php if($isAdmin || isset($permission['OperatorPermission'])):?>
<li class='side-every'>
<h1 class='manage-all active'>服务运营</h1>
<ul class='manage-list' style='display: none'>
<?php if($isAdmin || in_array(1,$permission['OperatorPermission'])):?>
<li class='custom'><a href='/custom'>用户管理</a></li>
<?php endif;?>
<?php if($isAdmin || in_array(2,$permission['OperatorPermission'])):?>
<li class='record'><a href='/record'>邀请记录</a></li>
<?php endif;?>
<?php if($isAdmin || in_array(3,$permission['OperatorPermission'])):?>
<li class='mhorder'><a href='/mhorder'>购买记录</a></li>
<?php endif;?>
<?php if($isAdmin || in_array(4,$permission['OperatorPermission'])):?>
<li class='discount'><a href='/discount'>优惠券、米欢币</a></li>
<?php endif;?>
<?php if($isAdmin || in_array(5,$permission['OperatorPermission'])):?>
<li class='collect'><a href='/collect'>客户信息收集</a></li>
<?php endif;?>
</ul>
</li>