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

• javascript
• vue.js

3 Answers 3

You 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>