最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I link the Button to another page using VUE.JS - Stack Overflow

programmeradmin2浏览0评论

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 badges
Add a ment  | 

3 Answers 3

Reset to default 2

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>
发布评论

评论列表(0)

  1. 暂无评论