vue怎么点击跳转

Vue 点击跳转

问题：如何在 Vue 中使用点击事件触发页面跳转？

回答：有两种方法可以使用点击事件触发页面跳转：

1. 使用 组件

立即学习“前端免费学习笔记（深入）”；

router-link 组件是 Vue Router 提供的，用于在单页应用程序中实现页面间的导航。

<router-link :to="'/about'"><button>点击跳转到“关于”页面</button></router-link>

2. 使用 this.$router.push() 方法

this.$router.push() 方法可直接在组件方法中使用，会将指定的路径压入 history 堆栈，触发页面跳转。

methods: {  goToAbout() {    this.$router.push('/about')  }}

然后在 HTML 模板中绑定点击事件：

<button v-on:click="goToAbout">点击跳转到“关于”页面</button>

使用建议：

通常情况下，推荐使用 router-link 组件，因为它与 Vue Router 集成，可以自动更新 URL 和 history 堆栈。但如果需要在非路由组件中进行页面跳转，则可以使用 this.$router.push() 方法。