从JavaScript调用Vuetify路由器时不工作



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

作品:

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

不工作(页面刚刚刷新(:

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

作品(历史倒退一步(:

this.$router.go(-1)

浏览Chrome控制台中的$router对象,它看起来很好。我做错了什么?

Vue路由器提供了多种编程导航功能。

this.$router.go(n)

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

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对象为您提供了更多的控制,并允许您将路由或查询参数发送到目标组件。

例如,如果要导航到id3的用户的配置文件页面,可以执行类似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,而不是纯文本。

最新更新