I have a button and it needs to be linked to another page. This is my current code. How can we write this login in vuejs? It should go to page "/shop/customer/login"
<div class="space-x-6">
<button>Login</button>
<button @click="$storemit('openPaintCalculator')">
Calculator
</button>
</div>
I am early stage of learning vue.js
I have a button and it needs to be linked to another page. This is my current code. How can we write this login in vuejs? It should go to page "/shop/customer/login"
<div class="space-x-6">
<button>Login</button>
<button @click="$store.mit('openPaintCalculator')">
Calculator
</button>
</div>
I am early stage of learning vue.js
Share Improve this question asked May 19, 2021 at 1:50 Priti RathodPriti Rathod 1171 gold badge1 silver badge11 bronze badges3 Answers
Reset to default 2You can achieve this by using router-link
ponent of vue-router
. You need to pass a prop to
in the router-link which will accept a path.
<router-link :to="{ path: '/shop/customer/login' }"><button>Login</button></router-link>
You can use the Vue router link which is a ponent of vue-router.
More info: Vue Official Page
Option 1:
Note: page name should be declared in App.vue
<router-link :to="{ name: 'page_name' }">
</router-link>
Option 2
<router-link :to="{ path: 'you path(/shop/customer/login)' }"><button>Login</button></router-link>
If you don't want to use router-link you can create a method which navigates the user to your desired page. So in your ponent you can use router.push()
methods : {
redirectToLogin(){
router.push({ path: '/shop/customer/login'})
}
}
and use this method with the @click event handler in your button.
<div class="space-x-6">
<button @click="redirectToLogin()">Login</button>
<button @click="$store.mit('openPaintCalculator')">
Calculator
</button>
</div>