如何使用VUE.JS将按钮链接到另一个页面

Question

我有一个按钮，它需要链接到另一个页面。这是我当前的代码。我们如何在vuejs中编写此登录？它应该转到"/商店/顾客/登录"；

<div class="space-x-6">
<button>Login</button>
<button @click="$store.commit('openPaintCalculator')">
Calculator
</button>
</div>

我是学习vue.js 的早期阶段

Answer 1

您可以通过使用vue-router的router-link组件来实现这一点。您需要在路由器链接中传递一个接受路径的道具to。

<router-link :to="{ path: '/shop/customer/login' }"><button>Login</button></router-link>

Answer 2

您可以使用Vue路由器链接，它是Vue路由器的一个组件。

更多信息：Vue官方页面

选项1:

注意：页面名称应在App.vue 中声明

<router-link :to="{ name: 'page_name' }">
</router-link>

选项2

<router-link :to="{ path: 'you path(/shop/customer/login)' }"><button>Login</button></router-link>

Answer 3

如果你不想使用路由器链接，你可以创建一个方法，将用户导航到你想要的页面。因此，在您的组件中，您可以使用router.push((

methods : {
redirectToLogin(){
router.push({ path: '/shop/customer/login'})
}
}

并将此方法与按钮中的@click事件处理程序一起使用。

<div class="space-x-6">
<button @click="redirectToLogin()">Login</button>
<button @click="$store.commit('openPaintCalculator')">
Calculator
</button>
</div>