vue-router 相关问题

Vue 3 Composition API useRouter() 在 onMounted 钩子中

我想在我的组件中使用 useRoute ，该组件在 onMounted 挂钩中调用。 像这样的东西 从 '@/common/CheckUserAuth' 导入 { checkUserAuth } onMounted（异步（）=> { 等待检查用户验证...

如何在 Vuetify 中覆盖 v-btn 活动类？

我正在使用 Vue.js 2.6.10n 以及 Vuetify 2.1.0 和 vue-router 3.1.3 开发一个网站。 我有一个带有 v-btns 的 v-app-bar 来链接到我的不同伪页面，并且希望在

VueJS 2.6 中的编程路由和“在新选项卡中打开链接”选项

我有一个按钮，如果我点击它，就会将我带到一个新页面。它看起来像这样并且工作得很好（简化示例）： 去 我可以...

如何对 Vue 3“脚本设置”组合 API 上的路由变化做出反应？

这是我的应用程序中的路线示例： { 路径：“/某事”， 名称：“某条路线”， 组件：一些组件， 元：{showExtra：true}， }, { 路径：“/

Vue Router：页面刷新时自动重定向到路由器的根路径

我的 Vue 应用程序遇到问题，路由器自动将自身重定向到当前路径的根目录。比如说，我位于 localhost:5000/new/123456 路径上，当我刷新页面时，我是

Nuxt 中同一级别上的多个动态路由可能吗？

NuxtJS 中同一级别是否可以有多个动态路由？ 我尝试了这个，但它不起作用： 页面 --_article.vue --_city.vue 我正在使用 Nuxt Content 并想加载不同的 c...

如何在Nuxt中重定向到另一个路径？

您好，我想重定向到内部路径。 例子 https://mylink.com/some-page.html 和我的获取链接 https://mylink.com/another-page.html 我使用 router.replace 但它添加了最后一个链接...

使用 vue 3 路由器传递变量

我在 vue 3 中有一个使用 options API 的 newsCard 组件。当用户单击此卡时，我希望他们转到显示完整新闻文章的页面。但是，我需要将一些数据传递给这个完整的...

如何在Nuxt的asyncData中重定向

我是 vue.js 的新手，我有一个简单的问题。 我有如下代码： asyncData({ 参数, 错误 }) { 返回 Job.api() .fetchByID(params.id) .then((响应) => {

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 页面。