从 JavaScript 调用时，Vuetify 路由器不起作用？

Question

我正在尝试从 Vuetify 中的方法导航路由器，但是当在 go() 函数上放置 /path 时，整个页面只是刷新，并且无处导航。

作品：

<v-btn router to="/somepage">Goto page</v-btn>

不起作用（页面只是刷新）：

this.$router.go('/somepage')

作品（历史倒退一步）：

this.$router.go(-1)

在 Chrome 控制台中浏览 $router 对象，看起来还不错。我做错了什么？

Answer 1

Vue路由器提供several functions for programmatic navigation。

this.$router.go(n)

go(n) 函数预计n 是number，并且是历史中前进或后退的步数。我认为这就是您没有得到预期结果的原因。

this.$router.push(path|route)

如果您想提供函数的实际路径，您应该使用push() 而不是go()。例如，要转到“主页”页面，您可以使用 this.$router.push('/') 或转到个人资料页面 this.$router.push('/profile')。重要的是，当您使用push() 时，您提交的路径会被添加到历史堆栈中。

this.$router.replace(path|route)

如果您不想向历史堆栈添加条目，则应使用replace() 而不是push()。否则，replace() 的用法与push() 相同，即this.$router.replace('/') 或this.$router.replace('/profile')。

使用path 与使用route 对象

使用push(path|route) 和replace(path|route) 导航时，您可以选择使用path，它只是一个字符串，即您想去的地方的URL，或者使用route 对象。 route object 为您提供了更多控制权，并允许您将路由或查询参数发送到目标组件。

例如，如果您想导航到具有id 或3 的用户的个人资料页面，您可以执行this.$router.push({ path: '/profile', params: { id: 3 } }) 之类的操作。或者，如果您使用的是named route，您可以将路径名称替换为路径，即this.$router.push({ name: 'profile', params: { id: 3 } })。 name 应与分配给路由的名称相对应，无论您在何处设置了主 Router 实例。

使用 Vuetify 的 v-btn 组件

如果您使用的是Vuetify button component，则没有router 属性。相反，您只需指定 to 属性，Vuetify 会自动将其解释为 router-link，例如<v-btn to="/profile">My Profile</v-btn>。或者，您可以使用 route 对象，例如<v-btn :to="{ path: '/profile', params: { id: 3 } }">Profile</v-btn>。重要的是，请注意第二种情况下 to 前面的冒号 (:)。这告诉 Vue 将属性值解释为 JavaScript 而不是纯文本。