当前位置：文江博客话题详情

vue中历史记录中没有更多路由时如何禁用前进、后退按钮

发布于 2025-01-13 22:45:30 字数 575 浏览 0 评论 0原文

您好，我的应用程序作为另一个应用程序中的插件运行，因此我必须手动处理前进、后退导航。

我的问题：当没有更多路线时，我想使用.disabled类禁用前进、后退按钮。

无论如何，我使用历史模式前进时我使用 go(1) ，而后退时我使用 go(-1)

Here查看我的观点的步骤：

单击 Browse ++ 按钮 3 次
，现在单击 < 3 次，第 3 次必须将其禁用，
单击> 3 次第三次必须禁用

这里是我的代码链接

https://codesandbox.io/s/path -遍历-w6yy3f

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫腻 2025-01-20 22:45:30

我想在以下情况下禁用带有 .disabled 类的前进、后退按钮
没有更多的路线。

无法禁用 Div。，因为您有用于向后和向前点击的 div 元素。

因此，现在我将使用 v-if 根据条件从 DOM 中删除 backward 和 forward div。

工作演示： https://codesandbox.io/s/路径遍历分叉-dq3dte

回复收藏 0 原文

汐鸠 2025-01-20 22:45:30

这有效：

https://codesandbox.io/s/path-traversing-forked-djjbeb 不幸的是，

无法获取您在浏览器历史记录中的当前位置，因此我们需要在某个地方跟踪它。

该解决方案仅适用于通过链接进行导航的情况，如果使用浏览器导航，则该解决方案不起作用。

编辑

修复了 opensandbox 上控制台错误的问题。罪魁祸首是：

 created() {
    console.log("thiss", this.$route);
  },

删除 console.log 会停止日志错误。

您可以在此处阅读并跟踪该错误
https://github.com/codesandbox/codesandbox-client/issues/ 2095#issuecomment-818500869

This works:

https://codesandbox.io/s/path-traversing-forked-djjbeb

unfortunately there is no way to get the current position you are on the browser history, so we need to track it somewhere.

This solution would only work however if the navigation happens trough your links, it does not work if the browser navigation is used.

EDIT

Fixed the issue with the console errors on opensandbox. The culprit was the :

 created() {
    console.log("thiss", this.$route);
  },

removing the console.log stops the log errors.

You can read and track the bug here
https://github.com/codesandbox/codesandbox-client/issues/2095#issuecomment-818500869

回复收藏 0 原文

三生池水覆流年 2025-01-20 22:45:30

也许最简单的方法是存储引用当前索引的变量，并在向前/向后导航时递增/递减它。

backward() {
  currentIndex--;
  this.$router.go(-1);
},

forward() {
  currentIndex++;
  this.$router.go(1);
},
browse() {
  const param = this.getRandomTraversingObject();
  this.$router.push({ name: "traverse", params: param });
  console.log(this.$router, this.$router.history.length);
  currentIndex++;
},

然后只需将 .disabled 类绑定到 currentIndex...

Probably the easiest way to do this is to store a variable referencing the current index and increment/decrement it when you navigate forward/backward.

backward() {
  currentIndex--;
  this.$router.go(-1);
},

forward() {
  currentIndex++;
  this.$router.go(1);
},
browse() {
  const param = this.getRandomTraversingObject();
  this.$router.push({ name: "traverse", params: param });
  console.log(this.$router, this.$router.history.length);
  currentIndex++;
},

Then just bind the .disabled class to currentIndex...

回复收藏 0 原文

~没有更多了~