说一个简单的话题,新手刚接触导入导出的时候,export和export default傻傻分不清,下面我简单说一下两者的区别(export导出、export default导出默认变量、import导入):
a.在一个文件或模块中,export、import可以有多个,而export default仅有一个。
//tools.js文件
//示例export导出
/**
* 数组去重
* @param arr1 传入要去重的数组
* @description 字符串数组去重
*/
export const arrUnique = (arr1) => {
const res = new Map()
return arr1.filter((arr) => !res.has(arr) && res.set(arr, 1))
}
/**
* @description 生成guid
*/
export const guid = () => {
function S4 () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
}
/**
* @param {*} obj1 对象
* @param {*} obj2 对象
* @description 判断两个对象是否相等,这两个对象的值只能是数字或字符串
*/
export const objEqual = (obj1, obj2) => {
const keysArr1 = Object.keys(obj1)
const keysArr2 = Object.keys(obj2)
if (keysArr1.length !== keysArr2.length) return false
else if (keysArr1.length === 0 && keysArr2.length === 0) return true
/* eslint-disable-next-line */
else return !keysArr1.some(key => obj1[key] != obj2[key])
}
//routers.js文件
//示例export default默认导出
export default [
{
path: '/login',
name: 'login',
meta: {
title: 'Login - 登录',
hideInMenu: true
},
component: () => import('@/view/login/login.vue')
},
{
path: '/401',
name: 'error_401',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/401.vue')
},
{
path: '/500',
name: 'error_500',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/500.vue')
},
{
path: '*',
name: 'error_404',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/404.vue')
}
]
b.通过export方式导出,在导入时要加{},export default则不需要。
//login.vue文件
//export导出的数据导入示例
<template>
<div class="login">
这是登陆组件
</div>
</template>
<script>
import { guid, arrUnique } from "@/libs/tools";
export default {
name: "login",
data(){
return {
//这里放数据
}
},
methods: {}
}
</script>
//index.js文件
//export default默认导出数据的导入示例
import Vue from 'vue'
import Router from 'vue-router'
import routes from './routers';
Vue.use(Router);
const router = new Router({
routes,
mode: 'history',
base: '/'
})
.
.
.
export default router