vue-router 相关问题

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

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

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

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

Vue3 - OnBefoureRouteLeave 不等待用户输入

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

未知变量动态导入

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

Vue 观察者和反应性

在我的 vue 应用程序中，我想观察路线变化，然后对变化做出反应。这是我模拟路线更改的示例。 从 'vue' 导入 { ref, watch } 导入 { </desc> <question vote="0"> <p>在我的 vue 应用程序中，我想观察路线变化，然后对变化做出反应。这是我模拟路线更改的示例。</p> <pre><code>&lt;script setup&gt; import { ref, watch } from &#39;vue&#39; import { useRouter, useRoute } from &#39;vue-router&#39; const router = useRouter() const route = useRoute() // simulating a route change setTimeout(() =&gt; { router.push(&#39;/teams/t2&#39;) }, 2000); // Example 1 (doesn&#39;t work) watch(route.params.teamId, (newValue, oldValue) =&gt; { console.log(oldValue, newValue) }) // Example 2 (works!) watch(() =&gt; route.params.teamId, (newValue, oldValue) =&gt; { console.log(oldValue, newValue) }) &lt;/script&gt; </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 = () =&gt; { 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>

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

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

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

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

ESLint Vue 多字组件

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

是否可以从VueJS中的路由获取完整的url（包括来源）？

在此示例中： const 已解析 = this.$router.resolve({ 名称：'关于' }) console.log(已解析.路由.路径) 是否可以获取包含始发地的路线？就像，如果网址是 site.com/about，...

使用Vue-Router自定义路由前缀模式

我正在尝试使用 Vue-Router 在我的新项目中对 URL 进行模式化，以便它们看起来就像现有（非 Vue）应用程序中的 URL 一样。现有的应用程序 URL 如下所示： /#!第1页 /＃！第2页 我的Vue

无法在 Nuxt 2 应用程序上验证 Stripe 的域名（Apple Pay、Google Pay 付款方式）

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

删除 Vue Router 中的尾部斜杠

常量路线 = [ { 路径: '/:年份', 组件：导航， 孩子们： [ { 路径：''，名称：'测试'，组件：测试 } ] } ]; const routes = [ { path: '/:year', component: Nav, children: [ { path: '', name: 'test', component: Test } ] } ]; <!-- /2018/ --> <router-link :to="{name: 'test', params: {year: 2018}}"></router-link> 如果有孩子，我想删除添加到由 router-link 创建的路径中的尾部斜杠。 在 Vue-Router v4 中，您可以使用 strict 选项： const router = createRouter({ history: createWebHistory(), routes: [ ... ], strict: true, // applies to all routes }) 查看敏感和严格的路线选项。

vue-router 4 未找到参数的动态路径

我在 Vue 3 应用程序中使用动态 URL 常量路线 = [... { 路径：“/车辆/：id”， name: "车辆车辆页面", 组件：导入（ /* webpackChunkName: "

如何在其他VUE文件中使用Vue3 Router

所以我使用Vue3。我不确定如何在各个 VUE 文件 javascript 部分中使用应用程序中其他页面的路由器。因此，如果我有一个 Register.vue 视图，即 /register 中的

如何使用Nuxt3获取路由的参数

我使用 Nuxt3 和 Composition API。 当从 bakset 移动到 order 时，basket 正在使用 router.push，并且正在翻转参数。如何从订单中获取这些参数？在 nuxt2 版本中，哟...

vue-router useRouter 在构建库组件时不起作用

我正在构建一个 Vue3 npm 组件库，希望我可以使用 vue-router 的 useRouter 访问当前路由器，并且它将由导入我的任何 vue 应用程序自动提供

Quasar Vue Router 解析名为route的href

我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路： ”/”， 组件：() => import("layouts/MainLayout.vue")...

尝试在同一个项目中拥有 REST API 和前端应用程序

我有一个带有 REST 端点的 Spring Boot 应用程序，还有一个 VueJS 应用程序（以及一些 Vue 路由器逻辑）。问题是，每当我点击 http://localhost:8080/information 时，我...

Vue 3 简单的包罗万象的后备路由在服务器上不起作用

我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。 当我通过 访问链接时，它会打开页面，但是当我直接打开链接时，它会显示未找到错误。 { 不是芙...

vue-router 中有 router.reload 吗？

我在这个拉取请求中看到： 添加 router.reload() 使用当前路径重新加载并再次调用数据挂钩 但是当我尝试从 Vue 组件发出以下命令时： this.$router.reload() 我明白了...