vue.js - 从 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 对象，看起来还不错。我究竟做错了什么？

标签： vue.jsvuetify.jsrouter

Answer 1

Vue 路由器为程序化导航提供了多种功能。

this.$router.go(n)

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

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)您可以选择使用 a path，它只是一个字符串，它是您想去的地方的 URL，或者使用一个route对象。路由对象为您提供了更多控制权，并允许您将路由或查询参数发送到目标组件。

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

使用 Vuetify 的v-btn组件

如果您使用的是Vuetify 按钮组件，则没有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 而不是纯文本。