vue-router 相关问题

vue-router - 使用新导航取消从“/”到“/password”的导航

尝试导航到密码页面，vue-router 抛出此错误 未捕获（承诺）错误：使用新导航取消从“/”到“/password”的导航。 导航至

如何使用 jest 在 vue 3 中对 onBeforeRouteUpdate 进行单元测试

我有一种情况，全局组件使用 Vue 路由器的 onBeforeRouteUpdate， 这是代码 设置（） { const doSomething = (): 布尔 => { if (活动值) { 发出（'c...

Vue 3 Vue-router 4 Composition API - 在组件外部调用 router.push 不起作用

在我的 Vue 3 项目中，我使用 Vue 的组合 API，并将 axios 定义为 plugins/axios.js 中的插件，如下所示： 从“axios”导入 axios； 从“vue-ro...

使用最新版本的 Vue，Vue 路由器无法正常工作

Vue Router 似乎无法与 Vue“^3.5.4”（最新）一起使用。这是代码： Main.js 导入“引导程序”； 导入“bootstrap/dist/css/bootstrap.css”； 导入'vue3-

VueJs 渲染函数在更改时不会重新渲染新的动态组件

出于某种原因，我正在尝试实现一个非常简单的 vue-router 插件替代方案。像 vue-router 一样，我有两个组件 RouterLink 和 RouterView 以及一些路由表。单击路线...

如何将<slots>内容（由路由器视图提供）数据传递回声明插槽的组件

我有3个组件：App.vue（入口点）、slotWrapper.vue（包装组件）、About.vue（页面内容）。 在“App.vue”内部，我有路由器视图设置，它被“slotWrapper.vue”包裹着

Vue router 4 无法在 WordPress 自定义主题中工作

我正在为 WordPress 设置编写一个自定义 vue 3 主题。所有 php 逻辑都工作正常，我正在做一些代码优化，我决定安装 vue router 4 来拆分原始 vue templ...

如何在为组件创建 props 时捕获路由错误

我正在尝试捕获解析路由参数以传递给组件时可能发生的错误。例如，组件 A 需要一个 URL 对象，而路由器从路由创建该对象

如何在 nuxt-link 中添加 href？

我有很多这样的卡片 我有很多这样的卡片 <nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }"> <a :href="card.link>Go to href</a> </nuxt-link> 点击带有 nuxt-link 的卡片应打开包含卡片详细信息的页面 单击 href 应打开外部站点 但是当我点击 a-href 其打开的详细信息并忽略 a-href 尝试为 nuxt-link 使用一些标签但没有帮助 如果您在 <a> 内单击 <a>（这正是 <nuxt-link> 生成的内容），您实际上是将单击事件发送到两个元素。这不是一个好的做法（甚至用 js 停止传播）。只是不要嵌套它 如果它必须位于“卡片”之上，也许可以使用 css 对其进行绝对定位。 尝试类似： <div class="card"> <nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }"> {{ card.content }} </nuxt-link> <a class="card__cta" :href="card.link>Go to href</a> </div> 和 .card { position: relative; } .card__cta { position: absolute; bottom: 24px; // depending where you need it, maybe you need top property right: 24px; // depending where you need it, maybe you need left property } 目前看来这对我有用 在父组件中 <template> <ul v-if="loadedTertiaryMenu" class="nav justify-content-end" > <li v-for="item in loadedTertiaryMenu" :key="item.id" class="nav-item" > <NavLink :attributes="item" /> </li> </ul> </template> <script> import NavLink from '@/components/Navigation/NavLink' export default { name: 'TheNavigationTertiary', computed: { loadedTertiaryMenu() { return this.$store.getters.loadedTertiaryMenu } }, components: { NavLink } } </script> <style scoped lang="scss"> </style> 在子组件中 <template> <component v-bind="linkProps(attributes.path)" :is="NavLink" :title="attributes.title" :class="[ attributes.cssClasses ]" class="nav-link active" aria-current="page" > {{ attributes.label }} </component> </template> <script> export default { name: 'NavLink', props: { attributes: { type: Object, required: true } }, methods: { linkProps (path) { if (path.match(/^(http(s)?|ftp):\/\//) || path.target === '_blank') { return { is: 'a', href: path, target: '_blank', rel: 'noopener' } } return { is: 'nuxt-link', to: path } } } } </script> <style scoped lang="scss"> </style> 这是@ArlanT 答案的扩展 它添加了 <slot/>，以便您可以按如下方式在外部使用它。 <hyper-link class="anyClass" :url="myCustomUrl" @click.native="">Here lies my html</hyper-link> <template> <component v-bind="linkProps(url)" :is="'hyperLink'" > <slot/> </component> </template> <script> export default { props:['url'], name:'hyperLink', methods: { linkProps (path) { if (path.match(/^(http(s)?|ftp):\/\//) || path.target === '_blank') { return { is: 'a', href: path, target: '_blank', rel: 'noopener' } } return { is: 'nuxt-link', to: path } } } }; </script> <style> </style> <a :href="card.url" target="_blank">{{ card.title }}</a> <NuxtLink to="/the-important-report.pdf" external> Download Report 使用外部强制链接呈现为 a 标签而不是 Vue Router RouterLink。

将 props 传递给路由而不需要 URL 参数

我想将数据传递到路由，而不需要在路径中定义参数。我已经能够通过使用查询参数来完成传递数据，但我不想在...

如何防止 Nuxt 在进入无效路径时进入错误布局？

我一直在查看 GitHub 问题、StackOverflow 和官方文档，但我似乎找不到在哪里以及如何禁用路由器在进入 in...时进入 error.vue 页面。

具有延迟加载功能的 Vue 命名视图

我正在尝试创建我的路线，但我希望它们都使用我的应用程序中的默认路由器视图。 查看文档： https://router.vuejs.org/guide/essentials/named-views.html 我应该是一个...

Vue 3 路由器无法工作。我不明白为什么

我是vue（vue 3）的初学者。我正在测试一个模拟 vue 应用程序，在测试默认主页后，我想测试如何制作 2 个（或更多）不同的页面。然而，我所做的不起作用，

如何避免在 vue-router 中的查询中使用硬编码参数名称

目前我将参数保存到 URL，如下所示： const save = async（参数：LocationQuery）=> { wait router.push({ 路径: '', 查询: { ...route.query, ...parameter } }); }; 叫喜欢...

在计算值中使用vue-router的route.param.x有什么好处

Vue-router 文档给出了 2 种特定的使用模式： const 路由 = useRoute(); // 获取当前值 const id = 路由.params.id; // 观察进一步的值变化 手表（ () => 路线....

Nuxt.js：如何为每篇文章创建动态 nuxt 链接/路由？

我在弄清楚动态 nuxt-link 时遇到了麻烦。 在主页（localhost:3030/）上，有一些文章是由axios从后端服务器获取的。 每篇文章都必须指向...

Nuxt.js 路由器 - 更改路由参数而不重新安装新页面？

我有一个带有 Nuxt.js (v 2.15.7) 的单页应用程序，需要从 URL 获取两个参数。例如： 域名.com 域名.com/chapter3 域名.com/chapter3/section5 所有这 3 个地址都是...

TS2339：类型“CreateComponentPublicInstance<{}

管道结束时我收到此错误。该项目在我的本地桌面上运行，但是当我运行管道时，该管道因错误而中断。我已经尝试再次下载所有依赖项，甚至...

我无法从 Pinia Vuejs3 商店访问我的路线

我无法从商店访问我的路线。 对此或许有一个很好的解释。 我使用 Vuejs3 和 Pinia 我的商店： 从 'pinia' 导入 {defineStore} 从“vue-router”导入{useRoute}；...

Supabase auth.update() email_refresh_token 工作流程

当我想让经过身份验证的用户更改其电子邮件地址时，我使用 auth.update()，可在此处找到 https://supabase.com/docs/reference/javascript/auth-update 顺便说一句，我只使用魔术链接身份验证。