import { routes } from “@/router/routes“； 与 import routes from “@/router/routes“；有什么区别

// 以下两种导出方法的区别
import { routes } from "@/router/routes";
import  routes  from "@/router/routes";

这两种导入方式分别是使用了不同的 JavaScript 模块系统语法。

1. import { routes } from "@/router/routes";
   这种语法使用的是 ES6 的模块导入语法，它从指定的模块中导入特定的变量或函数。在这个例子中，它从 @/router/routes 模块中导入了名为 routes 的变量。

2. import routes from "@/router/routes";
   这种语法也是 ES6 的模块导入语法，但它是默认导出的方式。在这个例子中，它导入了整个 @/router/routes 模块，并将其赋值给了名为 routes 的变量。

举个例子，当 @/router/routes 模块中使用默认导出时，可以这样使用：

// @/router/routes.js
const routes = [
  // 路由配置...
];

export default routes;

// 导入方式1：解构导入
import { routes } from "@/router/routes";
console.log(routes); // 输出导入的 routes 变量

// 导入方式2：默认导入
import routes from "@/router/routes";
console.log(routes); // 输出导入的整个模块（即 routes 变量）

当 @/router/routes 模块按需导出多个变量时，可以这样使用：

// @/router/routes.js
export const routes = [
  // 路由配置...
];

export const otherVariable = "其他变量";

// 导入方式1：解构导入
import { routes, otherVariable } from "@/router/routes";
console.log(routes); // 输出导入的 routes 变量
console.log(otherVariable); // 输出导入的 otherVariable 变量

// 导入方式2：默认导入
import routes from "@/router/routes";
console.log(routes); // 输出导入的整个模块（即 routes 变量）

在实际使用中，如果一个模块只有一个默认导出，使用第一种导入方式；如果一个模块有多个按需导出的变量或函数，使用第二种导入方式。两种方式都是用于从其他模块中导入所需的变量或函数，选择使用哪种取决于被导入模块中的导出方式。