$route 从脚本设置内部抛出未定义的错误

Question

我想知道为什么这有效：

<template> 
<h1> You are on page {{ $route.params.page }}</h1>
</template>

但是当我尝试从脚本设置访问参数时，如

<script setup>
const pageNumber = $route.params.page;
</script>

EsLint 会因

$route

未定义而引发错误。

我正在尝试了解如何从模板内部访问变量与从脚本设置中访问变量。

我很清楚将所述参数作为 prop 传递并使用组件中的

defineProps

访问它的解决方案。我的问题与 Vue 的内部工作有关。即，为什么可以从模板访问变量，但不能从脚本访问变量。

Answer 1

如果您想在脚本设置中使用这些属性，您需要从各自的模块中导入它们。例如，如果要使用 $route，则需要从 vue-router 导入 useRoute 并在脚本设置中调用它：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const pageNumber = route.params.page
</script>