vue点击按钮实现跳转
路由跳转方法
在Vue中实现按钮跳转通常涉及Vue Router的使用。以下是几种常见方式：
声明式导航（模板中使用<router-link>）
<router-link to="/target-path" tag="button">跳转到目标页</router-link>编程式导航（方法中调用）
methods: {
navigateTo(path) {
this.$router.push(path)
}
}带参数的跳转方式
传递query参数
this.$router.push({
path: '/detail',
query: { id: 123 }
})传递params参数（需提前配置路由）
// 路由配置
{ path: '/detail/:id', component: Detail }
// 跳转代码
this.$router.push({
name: 'detail',
params: { id: 123 }
})跳转控制选项
替换当前历史记录
this.$router.replace('/new-path')前进/后退导航
this.$router.go(-1) // 后退一步
this.$router.go(1) // 前进一步导航守卫处理
可以在路由跳转前后添加逻辑控制：
router.beforeEach((to, from, next) => {
// 跳转前逻辑
next()
})动态路径跳转
使用动态路径参数时：
this.$router.push(`/user/${userId}`)注意事项
- 确保项目已安装并正确配置Vue Router
- 编程式导航通常在methods中调用
- 命名路由比路径更可靠，减少因路径修改导致的问题
- 传递对象参数时注意params和query的区别
以上方法适用于Vue 2.x和Vue 3.x，但Vue 3的组合式API中可以使用useRouter：
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/path')
