vue按钮实现页面跳转
使用 router-link 实现跳转
在 Vue 中可以通过 router-link 组件实现页面跳转，这是 Vue Router 提供的声明式导航方式。适合在模板中直接使用。
<router-link to="/target-page">
<button>跳转到目标页</button>
</router-link>to 属性指定目标路由路径，可以是字符串路径或路由对象。
编程式导航实现跳转
通过 this.$router.push() 方法可以在 JavaScript 代码中实现编程式导航。
<button @click="navigateToPage">跳转到目标页</button>methods: {
navigateToPage() {
this.$router.push('/target-page')
// 或使用命名路由
// this.$router.push({ name: 'targetPage' })
}
}带参数的跳转
传递参数到目标页面有两种常见方式：
// 通过路径参数
this.$router.push('/user/123')
// 通过查询参数
this.$router.push({
path: '/user',
query: { id: 123 }
})目标页面通过 $route.params.id 或 $route.query.id 获取参数。
替换当前路由
使用 replace 方法不会在 history 中留下记录：
this.$router.replace('/target-page')在新标签页打开
如果需要在新标签页打开页面，可以使用原生 a 标签：
<a :href="targetUrl" target="_blank">
<button>新标签页打开</button>
</a>computed: {
targetUrl() {
return `${window.location.origin}/target-page`
}
}路由守卫控制跳转
可以通过路由守卫控制跳转逻辑：
router.beforeEach((to, from, next) => {
if (需要登录 && 未登录) {
next('/login')
} else {
next()
}
})动态路由匹配
定义动态路由时，使用冒号标记参数：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})跳转时传递参数：
this.$router.push('/user/123')目标组件通过 this.$route.params.id 获取参数值。
