vue-router 相关问题

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

我期望通过router.push传递一个值，这是我想传递它的组件： //一些html 导出默认值{ 数据（）{ //</desc> <question vote="0"> <p>我期望通过 router.push 传递一个值，这是我想要传递它的组件：</p> <pre><code><template> //some html </template> <script> export default { data(){ //some data }, methods: { uploadTemplate(event) { if(everythingWell){ this.$router.push({name: 'upload-document', params: {value: "<a href="/cdn-cgi/l/email-protection" data-cfemail="0c69746d617c60694c69616d6560226f6361">[email protected]</a>"}}) } } } } </script> </code></pre> <p>**我的路由器：**</p> <pre><code>const routes = [ { path: '/upload', name: 'upload-document', props: { default: true }, component: () => import('./../modules/doc_templates/pages/UploadDocPage.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes, }) export default router; </code></pre> <p><strong>还有上传组件，我应该在其中使用道具：</strong></p> <pre><code><template> <div> <p>value: {{ this.value }} </p> </div> </template> <script> export default { props: { value: String } } </code></pre> <p>应用程序更改为上传路径，但“value”的值未定义，这是我在浏览器中得到的结果：</p> <p>[Vue Router warn]：导航时丢弃无效的参数“值”。</p> <p>我尝试了使用 props，但还是一样</p> </question> <answer tick="false" vote="0"> <p>您没有在路由中指定预期的参数：</p> <pre><code>const routes = [ { path: '/upload/:value?', name: 'upload-document', component: () => import('./../modules/doc_templates/pages/UploadDocPage.vue') } ] `` </code></pre> </answer> </body></html>

javascript vue.js vuejs3 vue-router

回答 0 投票 0

带有 Vue-Test-Utils 和 Vitest 的 Vue-Router 模拟

我试图理解用 Vitest 模拟 Vue-Router 的逻辑。为此，我尝试在一个非常简单的项目上设置和模拟我的测试环境。当我尝试按照

vue.js unit-testing mocking vue-router vitest

回答 3 投票 0

如何根据 Vue 路由器参数设置页面标题？

我正在尝试使页面标题（元标记）显示您当前所在的个人资料的用户名。我的代码如下：导出默认新路由器({ 模式：“历史”，巴...

vue.js vue-router

回答 2 投票 0

通过 nuxt-link 将动态对象数据传递到组件

我有一个在 Nuxt 3 中构建的项目，其主页显示产品。在该主页上，您可以单击产品标题，然后打开产品详细信息页面。我通过...存档此内容

javascript vue.js nuxt.js vue-router vue-props

回答 1 投票 0

Vue3 Router - createWebHistory v createWebHashHistory 问题与 <router-view>

我试图弄清楚为什么 createWebHistory 无法显示但 createWebHashHistory 可以。在本地主机上使用 createWebHistory 可以正常工作，但在服务器上（dreamhost...

vuejs3 vue-router

回答 1 投票 0

如何使用VueJS限制未登录用户的页面访问？

我目前正在练习 VueJs 并制作一些示例应用程序。我正在制作一个非常简单的应用程序，它基本上只是一个登录页面，用户将在其中放置他们的凭据并访问他们的个人资料。然而...

javascript vue.js single-page-application vue-router

回答 2 投票 0

Vue 3 路由器更改 <routing-view/> 但 URL 未更改

我在 vue 项目中遇到路由问题，vue-router 正在中工作，但没有更改 URL。这是我的 main.js 的样子：从 &qu... 导入 { createApp }

vue.js vuejs3 vue-router url-routing

回答 1 投票 0

如何查看路由器中的参数路由

如何检查变量中的路由参数，如下所示：常量 SUB_ROUTES = { GLOBALSTAR：“全球之星”， PARKINGMULTIPEAJE: "parkingMultipeaje", 保留：“重新...

vuejs3 vue-router vue-composition-api

回答 1 投票 0

vue3 + typescript：TS2345：“路由器”类型的参数不可分配给“Plugin_2”类型的参数

在我们的yarn多工作区项目中，我们在最新版本的vue中遇到了一个非常奇怪的打字稿构建异常： TS2345：“路由器”类型的参数不可分配给“插件”类型的参数...

vue.js vue-router

回答 3 投票 0

如何在Vue Router中创建和使用可选参数？

我需要通过两种方式路由到某个组件 - 一种带有参数，一种不带参数。我搜索了可选参数，但不知何故找不到太多信息。所以我的路线： { 路径：'/优惠/：会员...

javascript vue.js vue-router

回答 3 投票 0

处理 this.$router.replace(href);在 vue 2

我是 vue 新手，正在处理我之前创建的 vue 代码。因此，有很多遗留代码太复杂，现在无法更改。当用户...时，vue 代码可以处于两种状态之一...

vuejs2 vue-component vue-router

回答 1 投票 0

如何有条件地包含内容而不出现不和谐的动画？

在我的 Vue.js 应用程序中，我有这样的结构：基地看起来像：在我的 Vue.js 应用程序中，我有这样的结构： <template> <Base> <RouterView/> </Base> </template> Base 看起来像： <template> <Header :key="JSON.stringify(route.meta)" class="z-20 bg-white"></Header> <div class="flex flex-col h-screen"> <div class="grow pt-20"> <slot> </slot> </div> <Footer :key="JSON.stringify(route.meta)"></Footer> </div> </template> 在我的Header中，我希望根据路由器所在的路径隐藏某些链接。我可以这样做： <a v-if="route.path === '/pricing'">Home</a> 网页第一次绘制时出现的问题，即使在/pricing上，“主页”链接也不可见，直到它在页面中的其他项目周围移动时显得相当刺耳。有没有办法在第一次绘制时就可以完成这项工作？或者以某种方式让事情看起来不那么糟糕？我知道如何有条件地包含元素，所以我希望这个问题不会通过链接到其中一个来结束，我只是想以更好的方式有条件地包含内容。为了避免在 Vue 应用程序中有条件地显示内容时出现不和谐的效果，请考虑对经常更改可见性的元素使用 v-show，因为这会将它们保留在 DOM 中，但只是切换其可见性。这可以防止意外的布局变化。此外，您可以使用 CSS 添加微妙的过渡（例如淡入淡出），以使元素的出现和消失更加平滑。例如： <a v-show="route.path === '/pricing'" class="smooth-transition">Home</a> 在你的 CSS 中： .smooth-transition { transition: opacity 0.5s ease; } 这种方法可确保您的内容更改不那么突然并且视觉上更令人愉悦。

vue.js tailwind-css vue-router vue-router4

回答 1 投票 0

如何有条件地包含内容而不影响动画？

所以在我的 Vue 应用程序中我有这样的结构：基地看起来像：所以在我的 Vue 应用程序中，我有这样的结构： <template> <Base> <RouterView/> </Base> </template> Base 看起来像： <template> <Header :key="JSON.stringify(route.meta)" class="z-20 bg-white"></Header> <div class="flex flex-col h-screen"> <div class="grow pt-20"> <slot> </slot> </div> <Footer :key="JSON.stringify(route.meta)"></Footer> </div> </template> 在我的Header中，我希望根据路由器所在的路径隐藏某些链接。我可以这样做： <a v-if="route.path === '/pricing'">Home</a> 网页第一次绘制时出现的问题，即使在/pricing上，“主页”链接也不可见，直到它在页面中的其他项目周围移动时显得相当刺耳。有没有办法在第一次绘制时就可以完成这项工作？或者以某种方式让事情看起来不那么糟糕？我知道如何有条件地包含元素，所以我希望这个问题不会通过链接到其中一个来结束，我只是想以更好的方式有条件地包含内容。为了避免在 Vue 应用程序中有条件地显示内容时出现不和谐的效果，请考虑对经常更改可见性的元素使用 v-show，因为这会将它们保留在 DOM 中，但只是切换其可见性。这可以防止意外的布局变化。此外，您可以使用 CSS 添加微妙的过渡（例如淡入淡出），以使元素的出现和消失更加平滑。例如： <a v-show="route.path === '/pricing'" class="smooth-transition">Home</a> 在你的 CSS 中： .smooth-transition { transition: opacity 0.5s ease; } 这种方法可确保您的内容更改不那么突然并且视觉上更令人愉悦。

vue.js tailwind-css vue-router vue-router4

回答 1 投票 0

如何有条件地包含内容而不影响动画？

vue.js tailwind-css vue-router vue-router4

回答 1 投票 0

<router-link>和$router.push有什么区别？

需要更多的工作来实现，因为您可以使用 @click 事件将 $router.push 添加到任何元素。每种方法的优点和缺点是什么？有没有实例，

vue.js vue-router vuejs3

回答 2 投票 0

尝试在 vue 路由器中以历史模式使用 props 时出现空白页面

我在 vue router 中的一条路由需要一个带有 ID 的 prop，所以我添加了一个。常量路由 = [ { 路径：'/用户/：id'，名称：'用户'，组件：用户配置文件，道具：真实 }, //... ] ...

vue.js vue-router