vue-router 相关问题

Vue <router-view />没有显示任何内容

因此，我使用 MyServer.com/vue/ 等子目录在我的服务器中部署此应用程序。 在我的App.vue中只显示，在本地这个应用程序运行顺利，并且

Quasar 组件未加载

嗨，我有一个带有路由器、Pinia、eslint 和 TypeScript 的 Quasar 项目。 我的问题是，如果组件直接注入到布局（下面的 MainLayout）中，则组件会加载，但不会加载......

从 vue-router 路由 [x].name 生成类型

我正在尝试从 vue 路由器的路由生成路由名称。 目标是使用辅助函数 findRouteByName() 来查找路线。 但辅助函数的参数应该有...

如何使用 Vue 3 根据 Vue 路由添加不同的 html 元

我一直在尝试解决如何没有多大成功（我不认为我知道谷歌的正确内容）如何为我的Vue 3应用程序的不同路由（使用Vue Router）拥有不同的元。 ..

Vue Router - 设置单独的可选 url 参数时可选 url 参数的默认值

我有以下路线： 导出常量 personRoutes: RouteRecordRaw[] = [ { 路径: '/person/:id?/:handedSlug?', 名称：'人'， 组件： () => import('./view/person'), }, ]; ...

Vue 路由器滚动行为在某些情况下会阻止滚动

我希望窗口默认滚动，但不在主页上滚动（当我更改语言变量时）。我像这样改变了 Vue 路由器中的回调 滚动行为（到，从，保存位置）{ 如果（

$router.push 在 vuejs 应用程序中不起作用

我有以下vue代码：login.vue来自https://github.com/themeselection/sneat-vuetify-vuejs-admin-template-free 从 '@/views/pa... 导入 AuthProvider </desc> <question vote="0"> <p>我有以下vue代码：login.vue来自<a href="https://github.com/themeselection/sneat-vuetify-vuejs-admin-template-free" rel="nofollow noreferrer">https://github.com/themeselection/sneat-vuetify-vuejs-admin-template-free</a></p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import AuthProvider from &#39;@/views/pages/authentication/AuthProvider.vue&#39; import logo from &#39;@images/logo.svg?raw&#39; const form = ref({ email: &#39;&#39;, password: &#39;&#39;, remember: false, message:&#39;&#39; }); function login(){ // Make a POST request to the CodeIgniter API endpoint using fetch fetch(&#39;http://localhost:8080/api/validateCredentials&#39;, { method: &#39;POST&#39;, headers: { &#39;Content-Type&#39;: &#39;application/json&#39; }, body: JSON.stringify({ username: form.value.email, password: form.value.password }) }) .then(response =&gt; response.json()) .then(data =&gt; { if (data.status === &#39;success&#39;) { form.value.message = &#39;Login successful!&#39;; $router.push(&#39;dashboard&#39;); } else { form.value.message = data.message; } }) .catch(error =&gt; { form.value.message = &#39;An error occurred. Please try again later.&#39;; }); } const isPasswordVisible = ref(false) &lt;/script&gt; &lt;template&gt; &lt;div class=&#34;auth-wrapper d-flex align-center justify-center pa-4&#34;&gt; &lt;VCard class=&#34;auth-card pa-4 pt-7&#34; max-width=&#34;448&#34; &gt; &lt;VCardItem class=&#34;justify-center&#34;&gt; &lt;template #prepend&gt; &lt;div class=&#34;d-flex&#34;&gt; &lt;div class=&#34;d-flex text-primary&#34; v-html=&#34;logo&#34; /&gt; &lt;/div&gt; &lt;/template&gt; &lt;VCardTitle class=&#34;text-2xl font-weight-bold&#34;&gt; sneat &lt;/VCardTitle&gt; &lt;/VCardItem&gt; &lt;VCardText class=&#34;pt-2&#34;&gt; &lt;h5 class=&#34;text-h5 mb-1&#34;&gt; Welcome to sneat! 👋🏻 &lt;/h5&gt; &lt;p class=&#34;mb-0&#34;&gt; Please sign-in to your account and start the adventure &lt;/p&gt; &lt;/VCardText&gt; &lt;VCardText&gt; &lt;!--&lt;VForm @submit.prevent=&#34;$router.push(&#39;/&#39;)&#34;&gt;--&gt; &lt;VForm @submit.prevent=&#34;login&#34;&gt; &lt;VRow&gt; &lt;div v-if=&#34;form.message&#34; class=&#34;danger&#34;&gt; {{form.message}} &lt;/div&gt; &lt;!-- email --&gt; &lt;VCol cols=&#34;12&#34;&gt; &lt;VTextField v-model=&#34;form.email&#34; autofocus placeholder=&#34;[email protected]&#34; label=&#34;Email&#34; type=&#34;email&#34; /&gt; &lt;/VCol&gt; &lt;!-- password --&gt; &lt;VCol cols=&#34;12&#34;&gt; &lt;VTextField v-model=&#34;form.password&#34; label=&#34;Password&#34; placeholder=&#34;············&#34; :type=&#34;isPasswordVisible ? &#39;text&#39; : &#39;password&#39;&#34; :append-inner-icon=&#34;isPasswordVisible ? &#39;bx-hide&#39; : &#39;bx-show&#39;&#34; @click:append-inner=&#34;isPasswordVisible = !isPasswordVisible&#34; /&gt; &lt;!-- remember me checkbox --&gt; &lt;div class=&#34;d-flex align-center justify-space-between flex-wrap mt-1 mb-4&#34;&gt; &lt;VCheckbox v-model=&#34;form.remember&#34; label=&#34;Remember me&#34; /&gt; &lt;RouterLink class=&#34;text-primary ms-2 mb-1&#34; to=&#34;javascript:void(0)&#34; &gt; Forgot Password? &lt;/RouterLink&gt; &lt;/div&gt; &lt;!-- login button --&gt; &lt;VBtn block type=&#34;submit&#34; &gt; Login &lt;/VBtn&gt; &lt;/VCol&gt; &lt;!-- create account --&gt; &lt;VCol cols=&#34;12&#34; class=&#34;text-center text-base&#34; &gt; &lt;span&gt;New on our platform?&lt;/span&gt; &lt;RouterLink class=&#34;text-primary ms-2&#34; to=&#34;/register&#34; &gt; Create an account &lt;/RouterLink&gt; &lt;/VCol&gt; &lt;VCol cols=&#34;12&#34; class=&#34;d-flex align-center&#34; &gt; &lt;VDivider /&gt; &lt;span class=&#34;mx-4&#34;&gt;or&lt;/span&gt; &lt;VDivider /&gt; &lt;/VCol&gt; &lt;!-- auth providers --&gt; &lt;VCol cols=&#34;12&#34; class=&#34;text-center&#34; &gt; &lt;AuthProvider /&gt; &lt;/VCol&gt; &lt;/VRow&gt; &lt;/VForm&gt; &lt;/VCardText&gt; &lt;/VCard&gt; &lt;/div&gt; &lt;/template&gt; &lt;style lang=&#34;scss&#34;&gt; @use &#34;@core/scss/template/pages/page-auth.scss&#34;; .danger{color:red;padding:20px;} &lt;/style&gt; </code></pre> <p>当我在登录成功中使用 $router.push 时，控件切换到 Promise 对象的 catch 块，并且我收到错误。如果我避免使用推送语句，我就会登录成功。当登录成功时，我想重定向到仪表板页面。</p> <p>我的路由器/index.ts</p> <pre><code>import { createRouter, createWebHistory } from &#39;vue-router&#39; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: &#39;/&#39;, redirect: &#39;/login&#39; }, { path: &#39;/&#39;, component: () =&gt; import(&#39;../layouts/default.vue&#39;), children: [ { path: &#39;dashboard&#39;, component: () =&gt; import(&#39;../pages/dashboard.vue&#39;), }, { path: &#39;account-settings&#39;, component: () =&gt; import(&#39;../pages/account-settings.vue&#39;), }, { path: &#39;typography&#39;, component: () =&gt; import(&#39;../pages/typography.vue&#39;), }, { path: &#39;icons&#39;, component: () =&gt; import(&#39;../pages/icons.vue&#39;), }, { path: &#39;cards&#39;, component: () =&gt; import(&#39;../pages/cards.vue&#39;), }, { path: &#39;tables&#39;, component: () =&gt; import(&#39;../pages/tables.vue&#39;), }, { path: &#39;form-layouts&#39;, component: () =&gt; import(&#39;../pages/form-layouts.vue&#39;), }, ], }, { path: &#39;/&#39;, component: () =&gt; import(&#39;../layouts/blank.vue&#39;), children: [ { path: &#39;login&#39;, component: () =&gt; import(&#39;../pages/login.vue&#39;), }, { path: &#39;register&#39;, component: () =&gt; import(&#39;../pages/register.vue&#39;), }, { path: &#39;/:pathMatch(.*)*&#39;, component: () =&gt; import(&#39;../pages/[...all].vue&#39;), }, ], }, ], }) export default router </code></pre> <p>请帮忙找出错误在哪里。</p> </question> </body></html>

useHead 正在更新已安装的标题，但未在激活的挂钩上更新

我使用 useHead 来更新页面中的标题，标题在安装页面时更新，但是当我重新访问页面时，页面标题不会更新。 当我重新访问页面标题时应该是

通过编程导航 Vue.js 传递 props

我有一个 Vue 组件，它有一个名为“title”的 prop，例如： 导出默认值{ 道具：['标题']， 数据（） { 返回 { } } } 我导航到该组件

获取/挂载获取的数据时Vue3内部错误

使用： - [email protected] [email protected] [email protected] 文件夹结构： 页面 |_index.vue |_ 项目 |_ [id].vue 索引.vue： 使用： - [email protected] - [email protected] - [email protected] 文件夹结构： pages |_ index.vue |_ items |_ [id].vue index.vue： <template> <div> <ul> <li v-for="item in items" :key="item"> <NuxtLink :to="`${item}`"> {{ item }} </NuxtLink> </li> </ul> </div> </template> <script setup lang="ts"> const items = [ 'items/1', 'items/2', 'items/3', ]; </script> [id].vue： <template> <div> <ItemDetails v-bind="data.details" /> <ItemDetailsTabs v-bind="data" /> </div> </template> <script setup lang="ts"> import { useFetch } from '#app'; import { useRoute } from 'vue-router'; import ItemDetails from '...'; import ItemDetailsTabs from '...'; import { ItemDetailsProps } from '...'; import { ItemDetailsTabsProps } from '...'; const { id } = useRoute().params; const endpoint = `/api/items?id=${id}`; interface ItemData extends ItemDetailsTabsProps { details: ItemDetailsProps; } const { data } = await useFetch(endpoint) as unknown as { data: ItemData; }; </script> 如果在 index.vue 中我通过 v-for 列出了所有项目， NuxtLink 有 target="_blank - 打开项目页面成功（这里没有问题）。 不幸的是，我不允许使用 target=_blank （应该在同一选项卡中打开页面），但这会导致以下错误： runtime-core.esm-bundler.js:40 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. [Vue Router warn]: uncaught error during route navigation: warn @ vue-router.mjs:35 triggerError @ vue-router.mjs:3449 (anonymous) @ vue-router.mjs:3487 Promise.catch (async) handleScroll @ vue-router.mjs:3487 finalizeNavigation @ vue-router.mjs:3335 (anonymous) @ vue-router.mjs:3207 Promise.then (async) pushWithRedirect @ vue-router.mjs:3174 push @ vue-router.mjs:3099 replace @ vue-router.mjs:3102 updateCountry @ useCountrySelector.ts:38 callWithErrorHandling @ runtime-core.esm-bundler.js:173 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182 job @ runtime-core.esm-bundler.js:1812 callWithErrorHandling @ runtime-core.esm-bundler.js:173 flushJobs @ runtime-core.esm-bundler.js:406 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:298 queueJob @ runtime-core.esm-bundler.js:292 (anonymous) @ runtime-core.esm-bundler.js:5761 triggerEffect @ reactivity.esm-bundler.js:400 triggerEffects @ reactivity.esm-bundler.js:390 triggerRefValue @ reactivity.esm-bundler.js:1021 (anonymous) @ reactivity.esm-bundler.js:1158 triggerEffect @ reactivity.esm-bundler.js:400 triggerEffects @ reactivity.esm-bundler.js:385 triggerRefValue @ reactivity.esm-bundler.js:1021 (anonymous) @ reactivity.esm-bundler.js:1158 triggerEffect @ reactivity.esm-bundler.js:400 triggerEffects @ reactivity.esm-bundler.js:385 triggerRefValue @ reactivity.esm-bundler.js:1021 set value @ reactivity.esm-bundler.js:1066 finalizeNavigation @ vue-router.mjs:3334 (anonymous) @ vue-router.mjs:3207 Promise.then (async) pushWithRedirect @ vue-router.mjs:3174 push @ vue-router.mjs:3099 navigate @ vue-router.mjs:2189 callWithErrorHandling @ runtime-core.esm-bundler.js:173 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182 invoker @ runtime-dom.esm-bundler.js:345 TypeError: Cannot read properties of null (reading 'parentNode') at parentNode (runtime-dom.esm-bundler.js:35:30) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5731:17) at ReactiveEffect.run (reactivity.esm-bundler.js:190:25) at instance.update (runtime-core.esm-bundler.js:5763:56) at updateComponent (runtime-core.esm-bundler.js:5588:26) at processComponent (runtime-core.esm-bundler.js:5521:13) at patch (runtime-core.esm-bundler.js:5119:21) at patchSuspense (runtime-core.esm-bundler.js:1253:13) at Object.process (runtime-core.esm-bundler.js:1204:13) at patch (runtime-core.esm-bundler.js:5125:26) Uncaught (in promise) TypeError: Cannot read properties of null (reading 'subTree') at move (runtime-core.esm-bundler.js:6043:34) at move (runtime-core.esm-bundler.js:6043:13) at Object.resolve (runtime-core.esm-bundler.js:1409:21) at runtime-core.esm-bundler.js:1523:30 如果控制台记录，数据似乎已成功获取。打开页面并收到此错误后，在页面刷新时，将显示 ItemDetails 页面，并按预期显示获取的数据。 我缺少什么？任何帮助将不胜感激！

Vue Router this.$router.push 不适用于方法

我正在登录，但是登录方法成功后，我正在为 $router 对象推送一条路由，但它不起作用，有人可以帮助我吗？ 我的代码： 登录（）{ this.attemptLogin({...thi...

如何修复[Vue Router warn]：导航时丢弃无效参数“id”

我使用 VueJS 3.3 和 Vue Router v4。 具有以下路由结构。 Vue 不断抱怨： [Vue Router warn]：导航时丢弃无效参数“id”。 我读过如果我推动

如何在没有按钮的情况下在 vue 中使用 router.back()

所以我当前的项目使用 vue 及其包，我想导航到最后一页而不使用编码到应用程序中的物理按钮，我想使用浏览器的按钮导航...

Vue.js 组件即使使用 mode="out-in" 也不会转换出来

我对 vue.js 比较陌生，一直在尝试让我的路由页面在用户切换到新页面时淡入和淡出。我以为用vue会相当简单，但是我已经泪流满面了……

将字符串转换为 vNode vue

我在数据库中保存了一个与此类似的字符串： Lorem #ipsum dolor sit amet，#consectetur adipiscing elit，sed do #eiusmod tempor incididunt ut labore et dolore magna aliqua。 正如你所看到的...

TypeScript 安全路由名称？

考虑以下代码： const 路由器 = useRouter() 等待 router.push({ name: 'NonExistingRoute', // 没有打字稿错误 ): }) 给出了一个不存在的路由名称，但没有 TypeScript 错误

在 pinia 商店前运行的路由器守卫

我正在使用： [email protected] [email protected] vue-路由器@4.1.6 我正在使用 Firebase，我使用 pinia Store 进行身份验证。我现在这样做的方式是： 我有一家叫 sto 的 pinia 店...

Vue3 Transition 不适用于 Route 内的 Router-Link

前几天我试图设置一个 vue-router 页面。基本思想是在每条路线上都有一个按钮可以转到另一条路线。我试着用简单的淡入淡出过渡来制作动画，而

单页应用程序：进入/重新加载应用程序时如何在 Vue.js 3 Composition API 中卸载应用程序？

Webpack 服务器在浏览器控制台中显示以下警告： [Vue warn]: 宿主容器上已经挂载了一个应用实例。 如果你想在同一个主机上安装另一个应用程序

Vue 3 中嵌套路由的悬念——为什么内容消失了？

我正在使用 Suspense，并在页面上获取异步数据。在初始化回退加载指示器是可见的，但在切换页面时我会保留当前页面内容，直到新页面准备好 + nprogress b ...