import '@/drectives'
// 导入自定义指令
// import { color, Imgerror } from '@/drectives'

import * as directives from '@/drectives'
// console.log(directives)    // 默认  按需  都可以拿到

//for (const k in directives) {
    
    
// Vue.directive(k, directives[k])
//}
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]))

公共组件(避免代码冗余 功能复用)

// import Vue from 'vue'
// // 自定义指令

// Vue.directive('Imgerror', {
    
    
//   inserted(el, binding) {
    
    
//     el.onerror = function() {
    
    
//       el.src = binding.value
//     }
//   }
// })
// // 设置文字颜色
// Vue.directive('color', {
    
    
//   inserted(el, binding) {
    
    
//     el.style.color = binding.value
//   }
// })

// 按需导出      (扩展: 默认导出 只能有一个)
export const Imgerror = {
    
    
  inserted(el, binding) {
    
    
    el.onerror = function() {
    
    
      el.src = binding.value
    }
  }
}
export const color = {
    
    
  inserted(el, binding) {
    
    
    el.style.color = binding.value
  }
}

使用组件

Vue 路由模块中$route和$router 的区别?

//route文件里面用的
$route 中存储的是跟路由相关的属性(如$route.params,$route.query) ; 
//组件内部可以用来跳转
$router 中存储的是和路由相关的方法(如$router.push(),$router.go()), 

**扩展:
**
$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，
name 等路由信息参数
$router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，经常用的跳转链接就可以用this.router.push会往history栈中添加一个新的记录。返回上一个history也是使用$router.go 方法

// 1. 定义路由规则
        //    path:'/detail/:形参名'

        // 2. 跳转 `to:/detail/实参`

        // 3. 在组件中获取当前的参数值？
        //   this.$route.params.形参
        //   - $route 引入了vueRouter插件之后， vue组件内部通过 $route 就可以直接来访问当前的组件对象
        //   - $route这个对象有很多属性，params用来保存当前传入动态路由的参数值

二级路由
普通写法

动态路由和静态路由 (方便维护 代码冗余)

路由分模块写

路由分模块组合书写使用

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

// 引入多个模块的规则
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'
// 动态路由表 => 动态路由(需要权限才可以访问的) 我们这里准备一个数组存放
export const asyncRoutes = [
  approvalsRouter,
  departmentsRouter,
  employeesRouter,
  permissionRouter,
  attendancesRouter,
  salarysRouter,
  settingRouter,
  socialRouter
]
export const constantRoutes = [
  {
    
    
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    
    
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    
    
    // 重定向
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
    
    
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: {
    
     title: 'Dashboard', icon: 'dashboard' }
    }]
  },

  // 404 page must be placed at the end !!!
  {
    
     path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
    
    
  // mode: 'history', // require service support
  scrollBehavior: () => ({
    
     y: 0 }), // 管理滚动行为, 让页面切换时回到顶部
  routes: [...constantRoutes, ...asyncRoutes] // 临时合并动态路由和静态路由
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
    
    
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

// 其中的一个分模块 路由

import Layout from '@/layout'

export default {
    
    
  path: '/approvals',
  component: Layout,
  children: [{
    
    
    name: 'approvals',
    path: '',
    component: () => import('@/views/approvals'),
    meta: {
    
     title: '审批', icon: 'tree-table' }
  }]
}