从 JavaScript 调用时 Vuetify 路由器不工作?
Vuetify router not working when called from JavaScript?
我正在尝试从 Vuetify 中的方法导航路由器,但是当在 go() 函数上放置一个 /path 时,整个页面只是刷新,并且无处导航。
作品:
<v-btn router to="/somepage">Goto page</v-btn>
不起作用(页面只是刷新):
this.$router.go('/somepage')
作品(历史倒退一步):
this.$router.go(-1)
在Chrome控制台中浏览$router对象,看起来还不错。我做错了什么?
Vue 路由器提供 several functions for programmatic navigation.
this.$router.go(n)
go(n)
函数期望n
为number
并且是历史中前进或后退的步数.我认为这就是您没有得到预期结果的原因。
this.$router.push(path|route)
如果您想提供函数的实际路径,您应该使用 push()
而不是 go()
。例如,要转到 "home" 页面,您可以使用 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 而不是纯文本。
我正在尝试从 Vuetify 中的方法导航路由器,但是当在 go() 函数上放置一个 /path 时,整个页面只是刷新,并且无处导航。
作品:
<v-btn router to="/somepage">Goto page</v-btn>
不起作用(页面只是刷新):
this.$router.go('/somepage')
作品(历史倒退一步):
this.$router.go(-1)
在Chrome控制台中浏览$router对象,看起来还不错。我做错了什么?
Vue 路由器提供 several functions for programmatic navigation.
this.$router.go(n)
go(n)
函数期望n
为number
并且是历史中前进或后退的步数.我认为这就是您没有得到预期结果的原因。
this.$router.push(path|route)
如果您想提供函数的实际路径,您应该使用 push()
而不是 go()
。例如,要转到 "home" 页面,您可以使用 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 而不是纯文本。