vue的路由 按需加载、权限验证添加

我们在用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>