找到 @ vue / composition - api 文档，翻阅 使用 方式，结果看到一句醒目的提醒， vue 2 . 7+ 版本已经内置了该库， 该库需要配合 vue 2 . 6+ 以下版本 使用 ，这时候我就返回项目查看 vue 对应的版本，package . js on 显示的是 " vue " : "^ 2 . 6 . 14" 版本。代表的是安装最近的一个大版本， 比如 2 . 6 . 14 将会匹配所有 2 . x . x，但不包含 3 . x . x 版本。^ 的意思是最近的一个大版本，比如 ^ 2 . 6 . 14 将会匹配所有的 2 . x . x 版本，但不包括3 . x . x。

Vue 3 新出的 Composition API 可以以更优雅的姿势聚集零散代码，自定义的 hook 函数使逻辑可以更好的复用，之前老旧的 Vue 2 项目也可以体验 Composition API 了。 安装 @ vue / composition - api ： yarn add @ vue / composition - api 在 main . js 中引入 : import Vue from ' vue ' import Vue Composition API from '@ vue / composition - api ' Vue . use(V

解决： 使用 Vue 3 Script Setup 时 ESLint 报错 ‘defineProps’ is not defined Vue 3 的 Script Setup 语法引入了 defineProps、 defineEmits 、defineExpose、withDefaults 的编译器宏。然而某些情况下，ESLint 会报错以上编译器宏函数未定义。 本文将介绍两种解决方案来解决这个 问题 （假定你的项目 使用 Vue -Cli 进行初始化）。 Step 1 . 检查 eslint-plugin- vue 的

### Vue 2 中 使用 Composition API 与路由配合 尽管 Composition API 是 Vue 3 的核心特性之一，但在 Vue 2 中也可以通过安装 `@ vue / composition - api ` 插件来实现类似的开发体验。以下是关于如何在 Vue 2 中结合 Composition API 和 Vue Router 进行 使用 的说明。 #### 安装依赖 为了在 Vue 2 项目中启用 Composition API ，需先安装插件并注册到应用中： ```bash npm install @ vue / composition - api 随后，在项目的入口文件（通常是 `main . js ` 或 `entry . js `）中引入并注册插件： ``` javascript import Vue from ' vue '; import Vue Composition API from '@ vue / composition - api '; Vue . use( Vue Composition API ); #### 配置路由 按照标准方式配置 Vue Router，例如以下代码片段展示了如何定义简单的路由表[^1]： ``` javascript const routes = [ { path : '/one', component : { template : '#a' } }, { path : '/two', component : { template : '#b' } } const router = new Vue Router({ routes, 接着初始化 Vue 应用实例时传入路由器对象： ``` javascript new Vue ({ el : '#box', router, // 注册路由 对于现代构建工具链下的 Vue 2 项目，则可能采用模块化导入的方式设置路由[^4] : ``` javascript // main . js import { createApp } from ' vue '; // 如果支持兼容模式可继续沿用原生语法 import App from ' . /App . vue '; import router from ' . /router/index'; // 假设已创建好独立的路由配置文件夹 createApp(App) . use(router) . mount('#app'); #### 使用 Composition API 访问路由信息 一旦完成上述准备工作之后，便可以在基于 Composition API 构建的组件内部访问当前活动路径以及其他导航功能。下面是一个例子展示怎样利用响应式变量监听 URL 变更事件以及执行跳转操作 : ```html <template> Current Route Path is {{ currentPath }} <button @click="navigateTo('/one')">Go To One</button> <button @click="navigateTo('/two')">Go To Two</button> </template> < script > import { ref, onMounted } from '@ vue / composition - api '; import { useRouter, useRoute } from ' vue -router'; export default { setup () { const route = useRoute(); // 获取当前路由状态 const router = useRouter(); // 获取全局路由管理器 let currentPath = ref(route . path); // 初始化显示初始页面地址 function navigateTo(path){ router . push({path}); // 执行页面切换逻辑 onMounted(() => { console . log('Component mounted at : ', route . fullPath); return {currentPath,navigateTo}; </ script > 注意这里调用了两个辅助函数——`useRouter()` 和 `useRoute()` 来分别获取整个应用程序级别的路由控制器实例和局部视图上下文中特定于某个时刻的状态快照[^5]。 此外还可以自定义滚动行为以便优化用户体验效果[^3] : ``` javascript const router = new Vue Router({ . . . scrollBehavior(to,from,savedPosition){ if(savedPosition){ return savedPosition; }else{ return {top : 0}; 以上就是有关 Vue 2 下运用 Composition API 结合 Vue Router 开发的一些基本概念和技术要点介绍。