vue-router 相关问题

Vue Router是一个用于单页面应用程序的路由库,设计用于Vue.js框架。

我们如何在Vue 3中做动态布局组件?

我已经尝试了很多我所看到的东西,但我无法让动态布局组件工作。 这是我的代码: 从“@/components/wrappers/SiteW...</desc>导入DefaultLayout <question vote="0"> <p>我已经尝试了很多我所看到的东西,但我无法让动态布局组件工作。</p> <p>这是我的代码:</p> <pre><code>&lt;script setup&gt; import DefaultLayout from &#34;@/components/wrappers/SiteWrapper.vue&#34;; import SimpleLayout from &#34;@/layouts/Simple.vue&#34; import { useRoute } from &#39;vue-router&#39;; import { computed } from &#39;vue&#39;; const route = useRoute(); const layout = computed(() =&gt; { return route.meta.layout || DefaultLayout; }); &lt;/script&gt; &lt;template&gt; &lt;component :is=&#34;layout&#34;&gt; &lt;router-view /&gt; &lt;/component&gt; &lt;/template&gt; </code></pre> <p>Vue 路由器看起来像这样:</p> <pre><code>{ path: &#39;/terms-and-conditions/:slug&#39;, name: &#39;TermsAndConditions&#39;, component: TermsAndConditions, props: true props: true, meta: { layout: &#39;SimpleLayout&#39; } }, </code></pre> <p>我还缺少什么?</p> </question> <answer tick="false" vote="0"> <p>要将组件名称字符串与 <pre><code>:is</code></pre> 属性一起使用,组件需要通过选项 API 进行“本地注册”,而不仅仅是导入。您可以添加额外的选项 API <strong><code>&lt;script&gt;</code></strong> 标签来执行此操作:<pre> </pre><code>&lt;script&gt; import SimpleLayout from &#34;@/layouts/Simple.vue&#34; export default { components: { SimpleLayout } } &lt;/script&gt; </code></p> <pre>或者,使用 Composition API 和 </pre><code>&lt;script setup&gt;</code><p>,您可以返回组件本身而不是字符串:<pre> </pre><code>const layout = computed(() =&gt; { return route.meta.layout === &#39;SimpleLayout&#39; ? SimpleLayout : DefaultLayout; }); </code></p> <pre> </pre></answer>

回答 0 投票 0

Vue 路由器 - 在一个导航守卫中多次调用“下一个”回调

我正在使用 Vue 3 和 Vue router 4。我创建了我的路由必须经过的中间件函数,但由于某种原因 Vue 抛出了这个错误: “下一个”回调被调用...

回答 1 投票 0

vuerouter 的 HTML5 历史记录模式在生产环境中不起作用

在我的 Laravel 和 Vue.js V2 项目中,我实现了具有历史记录模式的 Vue Router v3。它在我的开发机器上完美运行。然而,一旦我切换到生产环境,我就会收到错误消息......

回答 1 投票 0

Nuxt 3 + Vite:Rollup 无法解析导入“vue-router”

在我的Nuxt 3应用程序的构建过程中,出现以下错误消息: [vite]:Rollup 无法解析从“[...]/node_modules/nuxt/dist/app/

回答 2 投票 0

在Vue Router中将状态传递给受保护的路由(脚本设置方法)

晕朋友们,我需要向 vue-router 中的受保护路由发送一个状态。但在这样做时我遇到了错误。 丢弃无效参数“_id”、“dish_name”、“descriptio...

回答 1 投票 0

hash 未包含在 vue router-link 中:active-class

“我在尝试将特定类应用到处于活动状态的路由器链接组件时遇到了挑战,这意味着当用户位于确切路径上时,包括任何哈希或查询参数...

回答 1 投票 0

从 router-link 转到特定组件视图

有没有办法从具有多个组件的路由到达特定组件?,我搜索了文档,但没有任何相关内容 这里有我在应用程序路由器中的缩短路线: 常量路由...

回答 2 投票 0

变量保留旧值

我的 Vue 应用程序遇到问题:当我单击某个产品时,会触发 navigationAndChange 函数,该函数会获取该产品的 ID 并将我带到包含该产品的页面。有电...

回答 1 投票 0

在 Vue 3 中的 Vue.js 中创建动态面包屑导航

我目前正在尝试在 Vue.js 3 中创建面包屑组件。我在谷歌上搜索了这个问题几个小时,但我似乎找不到适合我的解决方案,它们要么不够动态,要么赢了不是...

回答 1 投票 0

Vue/Quasar:如何添加持久查询参数

给定 Vue 3 和 Quasar 2.6 上的应用程序。 我正在尝试在网址中添加一个参数,以便它在导航过程中保持不变。这个想法是,它在应用程序启动时使用它来初始化应用程序状态,然后...

回答 1 投票 0

使用 vue-router 时可以有多个 id 路径吗?

有可能有这样的事情吗? // 路由器/index.js 常量路由 = [ { 路径: '/books/:bookId/authors/:authorId', 姓名:'作者', 道具:真实, 组件:() => import('@/

回答 1 投票 0

如何在IIS服务器上配置Vue 2应用程序?

我需要配置 IIS 服务器和 Vue 2 应用程序的帮助,我刚刚在 Windows IIS 7 服务器上安装了带有生产版本的 vue 2 应用程序,并且一切正常,只有一件事不起作用: 当我...

回答 2 投票 0

在导航路线时保留参数

如何在导航路线时保留参数。参数必须位于应用程序的每个页面中(不仅仅是嵌套路由中)。在角度上我可以用 this._router 来做到这一点。

回答 2 投票 0

路由器 = useRouter();在设置()中。但是我如何在我的方法中访问路由器对象呢?

如你所知,如果我这样做: const 路由器 = useRouter(); 在其中一种方法中,我得到了未定义的对象。所以我需要把它放在 setup() 中: 设置() { const 路由器 = useRouter(); } 但是...

回答 1 投票 0

如何在vue 3(vue-router 4)中重新加载相同的路由

我在开发过程中遇到了一个奇怪的案例。 我有一个模式组件,可以警告用户价格变化:如果用户单击按钮,我希望页面重新加载并自动运行

回答 1 投票 0

Vue 路由器负载问题

我已经为我的项目安装了 vue router,但问题是,当单击按钮时,我看到 url 参数发生了变化,但页面没有更新。或者当我直接访问url时,意图...

回答 1 投票 0

页面刷新时如何在 onMounted 中获取当前路由?

重新加载页面时,我想获取当前路线。遗憾的是,route.name 未定义,router.currentRoute 是 RefImpl 对象,它具有正确的路由,其中包含“/team”。 router.currentRoute.value 只是...

回答 2 投票 0

在 onMounted 中使用路由器时应用程序没有响应

我想根据组件中可组合项的状态重定向页面。但由于某种原因,在 onMounted 中添加路由器会挂起应用程序。 这是我的组件代码: const { 注释、错误、加载...

回答 1 投票 0

位于中间件中的等待请求在渲染页面之前完成

我这里有一个问题。我将 Vue.js 与 Nuxt.js 一起使用。 我制作了中间件来实现身份验证。这里我使用 JSON Web Token。我有accessKey和refreshKey。刷新键用于

回答 1 投票 0

Vue 3 + Vite 开发服务器在动态路由页面重新加载时返回 404

在我的项目中我使用Vue 3.2.36 + Vite 2.9.9 + VueRouter 4.1.3 我使用 npm run dev 运行开发服务器。 我的路线定义: 路线:[ { 小路: '/', 组件: 家, }, { ...

回答 4 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.