vue全局注册组件，路由分区，按钮权限控制

全局注册组件，减少了我们之前的引入文件，注册组件的问题
创建全局.js文件管理全局组件

// 1 - globalComponent.js

import Vue from 'vue' // 引入vue

// 处理首字母大写 abc => Abc
function changeStr(str){
    
    
    return str.charAt(0).toUpperCase() + str.slice(1)
}

/*
    require.context(arg1,arg2,arg3)
        arg1 - 读取文件的路径
        arg2 - 是否遍历文件的子目录
        arg3 - 匹配文件的正则
    关于这个Api的用法，建议小伙伴们去查阅一下，用途也比较广泛
*/
export default{
    
    
    install(Vue) {
    
    
        const requireComponent = require.context('.', false, /\.vue$/)
        console.log('requireComponent.keys():',requireComponent.keys())  // 打印
        requireComponent.keys().forEach(fileName => {
    
    
            const config = requireComponent(fileName)
            console.log('config:',config)  // 打印
            const componentName = changeStr(
                fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')   // ./child1.vue => child1
            )
            
            Vue.component(componentName, config.default || config) // 动态注册该目录下的所有.vue文件
        })
        }
}

// 2 - 将globalComponent.js引入main.js
import Global from './components/globalcomponets'
Vue.use(Global);
// 3 - 使用这类组件不再需要引入和注册，直接标签使用即可
<template>
  <div>
    <h1>I am HelloWorld</h1>
    <Child1></Child1>
  </div>
</template>

路由分区的好处就是避免了全部路由集中到一个文件，后续不好维护和查找

总路由管理文件 - index.js

分区路由
    - index.routes.js
    - login.routes.js

在大型项目中，往往会有很多互不关联的模块，例如电商平台中的商城，个人信息，这种情况下就可以对路由进行分区

// 分区路由文件写法 按功能引入相应的路由文件
export default {
    
    
    path:'/index',
    name:'Index',
    component: () => import('../views/Index.vue'),  // 懒加载式引入，当跳转到时才进行引入chunk
    children: [...]
}

// 总路由管理文件 index.js 写法
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routerList = []  // 路由数组 - 存放所有路由
function importAll(routerArr){
    
    
    // 该函数用于将所有分区路由中的路由添加到路由数组
    routerArr.keys().forEach( key => {
    
    
        console.log(key)
        routerList.push(routerArr(key).default)
    })
}
importAll(require.context('.',true,/\.routes\.js/))

const routes = [
    ...routerList
]

const router = new VueRouter({
    
    
    routes
})

export default router

第二种路由分区方式简单点

分区文件**homes.js**
export default [
{
    
    
    path: '/carts', 
    name: 'carts',
    meta: {
    
     auth: false },
    component: () => import('../view/carts.vue'), //路由懒加载
    children: [
        {
    
    
            path: '/carts/ecarths', 
            name: 'ecarths',
            // meta: { auth: false },
            component: () => import('../view/ecarths.vue') //路由懒加载
        }
        //路由懒加载
    ],
},
{
    
    
    path: '/tabs', 
    name: 'tabs',
    meta: {
    
     auth: false },
    component: resolve => require(['../view/tabs.vue'], resolve) //路由懒加载

}
]

总路由文件index.js
let router = new Router({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
    routes:[
      {
    
    
              path: '/login', //登录
              name: 'login',
              meta: {
    
     auth: false },
              component: resolve => require(['../view/login.vue'], resolve) //路由懒加载
        },
    ]
})
router.addRoutes([...indexPage]) //把引进来的分区文件放到这里即可
export default router

按钮权限控制

/*
    在项目里新建一个common文件夹用于存放全局 .js 文件
    这种全局文件夹做法相当普遍，一般项目里都应该有这样一个文件夹来管理全局的东西
*/

// common/jurisdiction.js  用于存放与权限相关的全局函数/变量

export function checkJurisdiction(key) {
    
    
    // 权限数组
    let jurisdictionList = ['1', '2', '3', '5']
    let index = jurisdictionList.indexOf(key)
    console.log('index:',index)
    if (index > -1) {
    
    
        // 有权限
        return true
    } else {
    
    
        // 无权限
        return false
    }
}

// 将全局权限Js挂载到全局中
// main.js

import {
    
     checkJurisdiction } from './common/jurisdiction'

// 优雅操作 - VUE自定义指令
Vue.directive('permission',{
    
    
  inserted(el, binding){
    
    
    // inserted → 元素插入的时候
    
    let permission = binding.value // 获取到 v-permission的值

    if(permission){
    
    
      let hasPermission = checkJurisdiction(permission)
      if(!hasPermission){
    
    
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }else{
    
    
      throw new Error('需要传key')
    }
  }
})

// 使用方式

<template>
  <div>
    <h1>I am Home</h1>
    <!-- 按钮根据value -->
    <div v-permission="'10'">
      <button>权限1</button>
    </div>
    <div v-permission="'5'">
      <button>权限2</button>
    </div>
  </div>
</template>

// 无需再通过value去判断，直接通过v-permission的值进行判断即可