可以使用 Vue Router API 的 $router.push() 方法实现动态跳转。使用参数进行动态跳转，语法为：this.$router.push({ path: '/my-route/:id', params: { id: 123 } })。使用查询参数进行动态跳转，语法为：this.$router.push({ path: '/my-route', query: { id: 123 } })。还可以使用 beforeEach 钩子根据特定条件动态跳转到另一个路由。
Vue 路由中的动态跳转
Vue 路由提供了一种在单页应用中管理视图状态的强大方法。动态跳转允许您根据特定条件或用户输入动态更改路由。
如何实现动态跳转
使用 Vue Router API 中的 $router.push() 方法，您可以动态地跳转到一个新的路由：
立即学习“前端免费学习笔记（深入）”；
this.$router.push({ path: '/my-dynamic-route' })使用参数进行动态跳转
要使用参数动态跳转，可以使用以下语法：
this.$router.push({
path: '/my-route/:id',
params: { id: 123 }
})使用查询参数进行动态跳转
要使用查询参数动态跳转，可以使用以下语法：
this.$router.push({
path: '/my-route',
query: { id: 123 }
})使用 beforeEach 钩子进行动态跳转
beforeEach 钩子允许您在导航到新路由之前执行某些操作。这可以用于根据特定条件动态跳转到另一个路由：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (this.$store.getters.isLoggedIn) {
next()
} else {
next({ path: '/login' })
}
} else {
next()
}
})其他注意事项
- 确保使用
$router.push()而不是this.$router.push(). - 如果您正在使用 Vuex，请使用
mapActions来绑定$router.push()动作。 - 请记住，动态跳转不会触发离开钩子（
beforeRouteLeave）。
