为何Vue模板中可访问$route，script setup中却提示未定义？

模板中能直接用$route的原因 #

Vue的模板在编译阶段会被转换成渲染函数，这个过程中Vue会自动处理模板内的标识符：

• 所有以$开头的全局注入属性（比如$route、$store），编译后会被解析为通过组件实例的代理对象访问，也就是this.$route。
• Vue Router通过全局混入（mixin）的方式，将$route注入到了所有组件的实例上，所以模板里写{{ $route.params.page }}时，实际是在访问组件实例上的$route属性，自然能正常运行。

script setup中直接用$route报错的原因 #

<script setup>是Vue 3推出的语法糖，它编译后对应组件的setup函数，这个函数的执行逻辑和组件实例是分离的：

• setup函数本身没有绑定组件实例的this（除非通过getCurrentInstance()手动获取），所以全局注入到组件实例上的$route，并不会自动出现在setup函数的作用域中。
• ESLint检查的是当前作用域内的标识符，$route没有在script setup的作用域里定义或导入，因此会抛出“未定义”的错误。

要在script setup中访问路由参数，正确的做法是使用Vue Router提供的Composition API：

import { useRoute } from 'vue-router'
const route = useRoute()
const pageNumber = route.params.page

useRoute()函数会通过Vue的依赖注入系统，获取到当前组件对应的路由对象，这是Composition API风格的正确访问方式。

核心差异总结 #

• 模板的编译过程自动关联了组件实例的代理，能直接访问实例上的全局注入属性；
• script setup的作用域是独立的，不会自动挂载这些全局注入属性，必须通过对应的Composition API或手动获取组件实例来访问。

内容的提问来源于stack exchange，提问作者dhiaagr