vue-router 相关问题

我想知道为什么会这样：您正在访问页面 {{ $route.params.page }} 但是当我尝试从脚本设置访问参数时，如下所示我想知道为什么这有效： <template> <h1> You are on page {{ $route.params.page }}</h1> </template> 但是当我尝试从脚本设置访问参数时，如 <script setup> const pageNumber = $route.params.page; </script> EsLint 会因 $route 未定义而引发错误。我正在尝试了解如何从模板内部访问变量与从脚本设置中访问变量。我很清楚将所述参数作为 prop 传递并使用组件中的 defineProps 访问它的解决方案。我的问题与 Vue 的内部工作有关。即，为什么可以从模板访问变量，但不能从脚本访问变量。如果您想在脚本设置中使用这些属性，您需要从各自的模块中导入它们。例如，如果要使用 $route，则需要从 vue-router 导入 useRoute 并在脚本设置中调用它： <script setup> import { useRoute } from 'vue-router' const route = useRoute() const pageNumber = route.params.page </script>

vuejs3 vue-router vue-script-setup

回答 1 投票 0

Vue：如何正确连接 Pinia 商店、路由器和 UI 工具栏以共享全局状态变量

给定 Vue 3 和 Quasar 上的应用程序。该应用程序管理一些配置，但一次只能管理一项。所以有一个“当前配置”的概念，它只是一个字符串（名称）。我想要...

vue.js vuejs3 vue-router pinia

回答 1 投票 0

无法在 Nuxt 2 应用程序中验证用于 Stripe 支付的 Apple Pay 域

我有一个 Nuxt 2 应用程序，带有 vue-router 的基本选项。根据Stripe的说明，我将域验证文件放在/static/.well-known/apple-developer-merchantid-domain-

stripe-payments vue-router applepay

回答 1 投票 0

Vue 路由器在 url 更改时不渲染组件

我在我的 vite 项目中使用 vue router 根据 url 渲染正确的页面/组件。我首先使用 router-link 更改 url，然后指定应在 t 上呈现的页面...

vue.js vue-router vite

回答 1 投票 0

Vue3 - OnBefoureRouteLeave 不等待用户输入

我需要创建一个 onBeforeRouteLeave 函数来等待用户输入。问题是出现未保存的更改确认对话框，但单击时没有任何反应。当我调试程序时...

vuejs3 vue-router

回答 1 投票 0

未知变量动态导入

我有一个带有 Vite 和 vue-router 的 vue 3 应用程序，我使用动态导入来分割路由以更好地组织。这是代码。路由器/index.ts 导入{authentiatedRoutes，publicRoutes}...

vuejs3 vue-router vite vue-router4

回答 1 投票 0

Vue 观察者和反应性

在我的 vue 应用程序中，我想观察路线变化，然后对变化做出反应。这是我模拟路线更改的示例。从 'vue' 导入 { ref, watch } 导入 { </desc> <question vote="0"> <p>在我的 vue 应用程序中，我想观察路线变化，然后对变化做出反应。这是我模拟路线更改的示例。</p> <pre><code><script setup> import { ref, watch } from 'vue' import { useRouter, useRoute } from 'vue-router' const router = useRouter() const route = useRoute() // simulating a route change setTimeout(() => { router.push('/teams/t2') }, 2000); // Example 1 (doesn't work) watch(route.params.teamId, (newValue, oldValue) => { console.log(oldValue, newValue) }) // Example 2 (works!) watch(() => route.params.teamId, (newValue, oldValue) => { console.log(oldValue, newValue) }) </script> </code></pre> <p>在示例 1 中，我想监视路由参数 <strong>teamId</strong> 的更改，因此我将 <strong>route.params.teamId</strong> 传递给观察者，然后我在控制台中收到一条警告：<em>“无效的监视源：t2 A watch 源只能是 getter/effect 函数、ref、反应对象或这些类型的数组。”</em> 当然，我的 console.log 不会触发。</p> <p>如果我只是将 <strong>route</strong> 传递给观察者，我不会收到此警告。但 Vue Router 文档说 <em>“路由对象是一个响应式对象，因此可以监视它的任何属性，您应该避免监视整个路由对象。在大多数情况下，您应该直接监视您期望更改的参数” </em></p> <p>我从中得到的是 <strong>route</strong> 是一个响应式对象，但 <strong>route.params.teamId</strong> 不是。但是为什么使用 <strong>() => route.params.teamId</strong> 可以正常工作呢？我不明白传递值和使用匿名箭头函数返回相同值之间的区别，以及是什么使一个结果具有反应性，而另一个则不具有反应性。</p> </question> <answer tick="false" vote="0"> <p>我意识到我的问题很愚蠢。我以某种方式假设你给 watch() 的任何内容都会以某种方式神奇地被跟踪。我忘记了我们实际上总是赋予观察者反应属性。</p> <p>对于那些仍然想知道该函数为我们提供“新鲜”值的人，这里有一个基本示例：</p> <pre><code> let numOne = 3; let numTwo = 1; let sum = numOne + numTwo; let getSum = () => { return numOne + numTwo } console.log(sum) // returns 4 console.log(getSum()) // returns 4 numTwo = 2; console.log(sum) // returns 4 console.log(getSum()) // returns 5 </code></pre> <p>sum 的值是在声明时设置的。 getSum() 在调用时获取值。</p> </answer> </body></html>

vue.js vue-router vue-composition-api vue-reactivity vue-script-setup

回答 0 投票 0

在带有 TypeScript 的 Nuxt/Vue 模板中使用路由查询参数时出错

我正在使用 TypeScript 开发 Nuxt.js 项目，并遇到路由查询参数的问题。具体来说，TypeScript 给我一个与名为

javascript typescript vue.js nuxt.js vue-router

回答 1 投票 0

使用 webpack 时 Vue 路由不起作用。主页可以工作，但子路径 404

在使用 webpack 之前，我的 vue 路由工作得很好。然而，我开始遇到一堆加载器问题，因此决定使用 webpack。然而，在我的 webpack 运行主程序之后...

javascript vue.js webpack vuejs3 vue-router

回答 1 投票 0

ESLint Vue 多字组件

有没有办法阻止 Vue3 中的单个单词视图名称从 ESLint 获取错误？每次运行 ESLint 时，我都会收到以下消息： 1:1 错误组件名称“About”应该始终是...