vue-router 相关问题

Vue Router 动态设置Meta

所以我有一个使用 Vue 和 Vue Router 的 SPA。它的设置类似于 iOS 应用程序，当您深入单击视图时，导航栏中的标题会发生变化。现在我已经将其硬编码在 paths.js 文件中......

Vue3 路由器 + 转换警告

我有一个带有转换的包装组件： // 包装器.vue 我有一个带有转换的包装组件： // Wrapper.vue <template> <transition appear mode="out-in" enter-active-class="animate__animated animate__fadeIn animate__faster" leave-active-class="animate__animated animate__fadeOut animate__faster" > <div :key="$route.path"> <slot /> </div> </transition> </template> 然后，我使用路由器中的一些组件填充默认插槽，如下所示： // Page.vue <template> <Wrapper> <router-view v-slot="{ Component }"> <component :is="Component" /> </router-view> </Wrapper> </template 我越来越 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.警告，这看起来很奇怪，因为我使用了正确的语法恕我直言。这是有意的吗？如果是的话，我错过了什么？ 注意：它工作正常，我只是不喜欢看警告:) 编辑：更多上下文 - 我正在尝试为桌面和移动设备创建包装器，而桌面设备应该具有上述转换。移动设备包装器的完成方式完全不同，此处不相关。 警告在这种情况下不应该显示，但只有当“router-view”是“transition”或“keep-alive”组件的direct子组件时才显示。 该错误已在此处报告：https://github.com/vuejs/router/issues/1306 根据官方指南，您应该在<transition> or <keep-alive>内使用<RouterView />，反之亦然不适用。 <router-view v-slot="{ Component, route }"> <transition name="fade"> <component :is="Component" :key="route.path" /> </transition> </router-view> <router-view>公开了一个v-slot API，主要是用<transition>, <keep-alive>组件包装你的路由组件。 更新： 计算属性可能对这种情况有帮助。很难，我不知道你是如何为小型设备实现代码的。这是一种方法... <script> function isSmallDevice() { /* code for checking device resolution */ return <Boolean> } export default { computed: { setTransitionProperty: function () { return isSmallDevice ? '' : 'fade' } } } </script> <router-view v-slot="{ Component, route }"> <transition :name="setTransitionProperty" mode="out-in"> <template #default> <component :is="Component" :key="route.meta.usePathKey ? route.path : undefined" /> </template> <template #fallback> Loading... </template> </transition> </router-view> 另一种方法可能是条件渲染，使用 v-if 和 v-else 指令。 从Vue3的官方文档来看，应该是这样的： <router-view v-slot="{ Component }"> <Transition name="slide-fade"> <component :is="Component" /> </Transition> </router-view> 转换名称在<style>部分中使用，如下所示： <style> .slide-fade-enter-active { transition: all 0.3s ease; } .slide-fade-leave-active { transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(-10px); opacity: 0; } </style> 了解更多信息Vue3 过渡

vue-router 重定向到登录。即使路径不受保护，它也会将我重定向到登录页面

导入{ 创建路由器， 创建网络历史 来自“vue-router”； 从“../views/Home.vue”导入主页； 从“../views/public.vue”导入公共页面； 常量路由器 =

Vue-router 在组件库中使用时返回未定义

我已经解决这个问题几个星期了，除了 stackoverflow 和 vue-router 自己的 github 问题上的一些死胡同之外，我似乎在任何地方都找不到任何信息。 我正在尝试...

Nuxt3：动态子路由不会触发活动类

Active 类仅适用于主路由，不适用于子路由 子路由是动态且可选的 这是我的页面目录 导航栏.vue Active 类仅适用于主路由，不适用于子路由 子路由是动态且可选的 这是我的页面目录 NavBar.vue <nav> <ul class="flex flex-wrap space-x-5 py-4 text-sm text-slate-600"> <li> <NuxtLink active-class="text-slate-700 font-medium" to="/feed" class="leading-none tracking-wide hover:underline hover:underline-offset-2" >Ana səhifə </NuxtLink> </li> <li>|</li> <li v-for="route in routes" :key="route.name"> <NuxtLink active-class="text-slate-700 font-medium" :to="`/flows/${route.slug}`" class="leading-none tracking-wide hover:underline hover:underline-offset-2" >{{ route.name }} </NuxtLink> </li> </ul> </nav> app.vue <template> <div class="min-h-screen bg-slate-100"> <BlogHeader /> <NavBar :routes="routes" /> <div class="mx-auto mt-5 grid max-w-6xl grid-cols-12 space-x-3 px-5 pb-10"> <div class="col-span-8"><NuxtPage /></div> <div class="col-span-4 w-full bg-white px-3 py-2"></div> </div> </div> </template> 我们先简化一下目录结构。您需要有一个与相同目录级别的目录具有相同名称的.vue文件。您需要在该 .vue 文件中包含 <NuxtPage />。只有这样才真正满足<NuxtLink/>所要求的嵌套目录结构。 - pages - index.vue - folder1/ - index.vue - folder2/ - index.vue - folder2.vue //same level with /folder2 !!! - folder1.vue //same level with /folder1 !!! 在folder1.vue和folder2.vue中： <template> <NuxtPage /> </template>

通过路由器链接传递道具

我对 Vue 3 路由器很陌生，所以真的需要帮助。 我正在尝试通过路由器链接传递道具。 所以，我有一个组件 Post，其中支柱是一个对象。 后vue 导出默认

vue router v4 中的重定向

我正在从 Vue Router v3 迁移到 Vue Router v4，并遇到了一个意外的问题，它破坏了我的应用程序中的很多逻辑 - 也许有人遇到过它并且知道一个好的解决方案。 在 Vue 路由器中...

SocketIo - 每次访问 routerview 页面时都会添加额外的事件侦听器

我有一个 vue3 应用程序，其中有一个主布局和使用 routerviews 嵌入其中的页面。 我遇到的问题是，每次我进入使用 socketIO eventlistene 的 routerview...

Vue路由器+反向代理导致500错误或空白页面

我的 nginx 配置如下： 服务器 { 服务器名称 my-website.com； 地点 / { proxy_pass http://192.168.1.128:5367; } 监听 443 ssl； # 由 Certbot 管理 ...

如何在 [email protected] (Vue3) 中使用 createAsyncComponent？

当我像这样填写 createRouter() 中的组件字段时： { 路径: '/文章/帖子', name: '文章帖子', 组件：defineAsyncComponent({ 加载器：() => import('@/views/arti...

如何使用Vue-Router在Vue中设置查询参数而不需要重新加载组件

我正在尝试使用 Vue-Router 设置查询参数，而无需在 Vue 中重新加载组件。但使用下面的代码会重新加载组件： this.$router.replace({query: this.filters}); 我们怎样才能...

在Vue Router中有条件地导入组件

我想有条件地在 vue 路由器中导入一个组件。这是我目前所拥有的： 孩子们： [ { 路径: ':选项', 组件：() => import('../components/Option1.vue'),...

如何在unplugin-vue-router的extendsRoutes内部定义重定向？

我想从 vite-plugin-pages 迁移到 unplugin-vue-router。在我的 vue3 项目的 router 文件夹中，我在基于 vite-plugin-pages 的路由文件夹中定义了以下路由配置，如下所示： ...

如何将 beoreRouteEnter 与组合 api 一起使用

我正在创建一个页面，其中存在来自文件的条件，如果条件为真，则用户应该导航到该页面，否则应该显示 error404 页面。 之前恩...</desc> <question vote="0"> <p>我正在创建一个页面，其中存在来自文件的条件，如果条件为真，则用户应该访问该页面，否则应该显示 error404 页面。</p> <pre><code>&lt;script setup&gt; beforeEnter: (to, from, next) =&gt; { if (condition) { next({ name: &#34;Error404Page&#34;, params: { pathMatch: &#34;/some-path&#34; }, }); } else { next(); } }; &lt;/script </code></pre> </question> <answer tick="false" vote="0"> <p>如果您使用 Nuxt 3，实现此行为的最佳选择是创建一个 <a href="https://nuxt.com/docs/guide/directory-structure/middleware" rel="nofollow noreferrer">middleware</a> 文件并将其绑定到页面。</p> <ol> <li>使用以下内容定义文件<pre><code>/middleware/check.js</code></pre>：</li> </ol> <pre><code>export default defineNuxtRouteMiddleware((to, from) =&gt; { if (/*condition*/) { return navigateTo(&#39;/some-path-to-error-page&#39;); } // else do nothing and just let Nuxt navigate to your page } </code></pre> <ol start="2"> <li>在页面组件（例如 <pre><code>/pages/my-page.vue</code></pre>）的 <pre><code>&lt;script setup&gt;</code></pre> 部分添加：</li> </ol> <pre><code>definePageMeta({ middleware: &#39;check&#39; }) </code></pre> <p>每次访问 <pre><code>check.js</code></pre> 时都会运行 <pre><code>/my-page</code></pre>，并且如果满足条件，将自动重定向。</p> <p>您还可以通过将文件名更改为<pre><code>/middleware/check.global.js</code></pre>来定义“全局”中间件文件 - 这样的文件将在每个路由事件之前自动运行（按字母顺序排列，以防有更多全局中间件），无需任何额外的配置。</p> </answer> </body></html>

vue路由器无法删除查询

我尝试通过单击按钮删除查询参数。 例如我的路线是http://localhost:8080/#/myroute?dialog=1。 现在我单击一个按钮，该按钮应删除查询部分？dialog=1。 我的点击

离子路由器 - 非线性路由

我正在为 Android 编写 Vue3 + Ionic 应用程序，并且我有一些选项卡。我想为每个选项卡维护不同的导航堆栈，因此当用户单击某些视图上的后退按钮时，他们将始终停留在...

在中间件中访问LocalStorage - NuxtJs

嗯，我从 nuxt 开始，我有以下路线： /家 /仪表板 /登录 我想保护 /dashboard，但仅限于使用 localStorage 中的令牌登录的用户。 最简单的方法我

Nuxt 3 中间件返回 404

我正在开发一个显示文章的 Nuxt 3 应用程序。它是现有 React 应用程序的新版本。在旧的 React 应用程序中，文章的 url 格式是 www.mysite.com/id-of-categories/title-of-articl...

如何在 Nuxt.js 中创建动态“面包屑”

大家好，我正在尝试在 Nuxt.js 中创建动态“面包屑”，有没有人有一个工作示例，它应该如何工作 我尝试创建一个简单的示例，但它没有按预期工作，

如何在根自定义元素中使用 vue router 和 vuex？

我有一个带有嵌套自定义元素的项目。现在我需要 vuex 和 vue 路由器。如何从根自定义元素使用此包，然后在所有子自定义元素中使用？ 目前我试穿了...