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

Question

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

Works：

<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而不是纯文本。