(自定义指令) 按需导出 默认导出 公共模板组件 ---＞导入使用 Vue 路由模块中$route 和$router 的区别? ---＞路由扩展

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