vue-router 相关问题

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

router-link-active 类不适用于不同的参数值(Vue Router 4)

大家好…我是拉丁人,所以我的英语不太好看。 我的自定义导航栏组件中有这个 组件。 大家好…我是拉丁人,所以我的英语不太好看。 我的自定义导航栏组件中有这个 <router-link> 组件。 <router-link :to="{ name: 'blog', params: { currentPage: 1 } }">Blog</router-link> 这是我的路线定义: { path: "/blog/:currentPage", name: "blog", component: () => import(/* webpackChunkName: "blog" */ "@/views/Blog.vue"), props(route){ const props = { ...route.params } props.currentPage = parseInt(props.currentPage, 10) return props } } 我的博客视图中有分页组件。 <button v-for="page in numberOfPages" :key="page" @click="$router.push({ name: 'blog', params: { currentPage: page } })" :disabled="page == currentPage"> {{ page }} </button> 我正在从那里切换页面(即currentPage路由参数),但是router-link-active类仅添加到<router-link>,其中currentPage等于1而不是其他,我怎样才能保持活跃这个<router-link>无论 currentPage 路由参数的值如何?我的分页系统必须是动态的,我无法为每个页面定义新的子路由,因为不知道有多少页。 这个问题在 Vue Router 3 中不存在,但我使用的是 Vue Router 4.0.3。 我尽力解释我的问题。 有人可以帮我吗... 您发帖快三年了,还没人回复?我在以下版本中也遇到了完全相同的问题: "pinia": "^2.1.7", "vue": "^3.4.29", “vue-router”:“^4.3.3” <RouterLink to="/menu" activeClass="custom-active-class">Menu</RouterLink> <style scoped> .router-link-exact-active { display: none; } .custom-active-class{ display: none; } </style> 路线配置 { name: 'Menu', path: '/menu/:category?', component: () => import('@/pages/MenuPage.vue'), props: true, meta: { requireAuth: false } } 如果路线与/menu相同,则隐藏,否则继续显示。 (我尝试了router-link-active,但不起作用) @fahico98 你解决了吗?

回答 1 投票 0

刷新时 Vue.js 中的路由之间的数据丢失

我正在开发一个 Vue.js 应用程序,使用 Vue Router 和 Axios 来获取用户数据。我有两个页面:/dashboard 和 /dashboard/me。 /dashboard 页面的数据已成功加载并显示...

回答 1 投票 0

为VUE-JS SPA设置.htaccess重写规则

我有一个 VUE 应用程序在历史模式下使用 VUE 路由器,但似乎无法在我的生产服务器上运行。我已经使用

回答 1 投票 0

如何删除[Vue Router warn]:找不到路径“/_nuxt/@plugin-vuetify/lib/components/VDivider/VDivider.sass”的位置匹配

我对 nuxt 环境相当陌生,我正在尝试了解导致这些错误的原因以及如何删除它们。当我第一次执行 npm run dev 时显示这些错误。 警告 [Vue 路线...

回答 1 投票 0

Syncfusion ejs-grid 子网格图标导航离开页面

我正在尝试将子网格添加到 Vue 中的 Syncfusion ejs-grid。 我遇到的问题是,添加到行中以允许您展开行的箭头在我单击它时会导致导航......

回答 1 投票 0

创建中间件时如何包含路由的子级?

我已经创建了一个全局身份验证中间件,但需要检查您是否要访问 /dashboard 中的任何路由及其子路由,例如 /dashboard/account 或 /dashboard/settings。 下面的中间件是一个非常

回答 1 投票 0

推送到vue-router不会改变路由

我正在尝试使用 Typescript 而不是 JavaScript 在我的笔记本电脑上启动并运行这个示例。这是一个示例“笔记”应用程序,展示了Python+VUE3的功能,

回答 2 投票 0

Vue 路由器推送错误:避免了到当前位置的冗余导航

有没有办法避免错误:避免冗余导航到当前位置。我需要进行分页,方法如下: handlePageChange(页:页数): void { 常量查询 = { ...这个....

回答 4 投票 0

ARGON 仪表板路由器/调整路线时出现问题

我在自定义routes.js 时遇到问题。当我最初使用 / 或 /login 调用它时,我想直接进入登录(Login.vue)。如何正确自定义默认的routes.js? T...

回答 1 投票 0

(vue 路由器)禁用浏览器后退和前进箭头,并带有警告

我正在创建一个多页测验,所以我需要用户无法返回到上一页。所以我写道: 常量路由器 = createRouter({ 历史记录:createMemoryHistory(), 路线 }); 这是...

回答 3 投票 0

如何使用 vue-router 处理错误

我正在寻找有关 vue-router 错误处理的最佳方法的建议。我已经实现了一个错误边界组件来捕获应用程序中的全局错误,但这不起作用......

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 4 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

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

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

回答 3 投票 0

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

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

回答 2 投票 0

使用 vue 3 路由器传递变量

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

回答 1 投票 0

如何在Nuxt的asyncData中重定向

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

回答 3 投票 0

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