[Vuejs]-How do I do an on-click method on a button that directs to another component?

by

0đź‘Ť

This sounds like a good opportunity to use vue-router, but there are multiple approaches to this problem. Depending on scope, there may be more than one good answer. There is a comment above about using emitters and props, which is fine, but I would recommend using vue-router because it’s made for this kind of dynamic component switching. If you’ve used the vue-cli it should be trivial to add, but the following example uses the standalone CDNs for brevity. This can all be done in separate files and the vue-cli will already have a nice scaffold for you if you want to see how that’s done.

const Main = {
      template: `
        <div>
          <router-link to="/register/business">Register for business</router-link>
          <router-link to="/register/personal">Register for personal</router-link>
        </div>
      `
    };

    const RegistrationPage = { template: '<router-view></router-view>' };
    const BusinessRegistration = {
      template: `
        <h1>Business</h1>
      `
    };
    const PersonalRegistration = {
      template: `
        <h1>Personal</h1>
      `
    };

    const routes = [
      {
        path: '/',
        component: Main
      },
      {
        path: '/register',
        component: RegistrationPage,
        children: [
          {
            path: 'business',
            component: BusinessRegistration
          },
          {
            path: 'personal',
            component: PersonalRegistration
          }
        ]
      }
    ];

    const router = new VueRouter({
      routes
    });

    const app = new Vue({
      router
    }).$mount('#app');
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
  </body>
</html>

There are multiple benefits to this approach:

  1. Vue router is supported pretty well by the Vue community so you can find lots of documentation and examples.
  2. Your end user can visit mysite.com/register/business and land on the correct page, rather than having to go through clicking on the button if they decide to leave your page and come back.
  3. Much of the logic is abstracted away by the library rather than having to do complex conditional logic and event emitters.

This is a very simple example that relies heavily on the “getting started” docs here. If you did start your project with the vue-cli, you should be able to run vue add vue-router, which should do some setup for you if you missed that step in the project creation process, otherwise you can use npm and set things up manually.

0đź‘Ť

Assuming that your vue router is already working and you already displayed your component What you did is already correct, just follow these steps to make it working.

First put a router view in your main app . like below

<v-app>
    <v-btn dark to="./components/CompanySignUp"> Sign up as a Company </v-btn>

    <v-btn dark to="./components/FreelanceSignUp"> Sign up as a Freelancer
    </v-btn>
    <router-view></router-view>
</v-app>

Second change your route name into this one, this route name will be use to call you component itself.

{
     path: "./components/CompanySignUp",
     name: "company_sign_up",
     component: CommpanySignUp
},

Lastly in your main, the final structrue is like this

<v-app>
        <v-btn dark to="{name:'company_sign_up'}"> Sign up as a Company </v-btn>

        <v-btn dark to="{name:'freelancer_sign_up'}"> Sign up as a Freelancer
        </v-btn>
        <router-view></router-view>
</v-app>

0đź‘Ť

You have your router.js file defined correctly but you never included it in your app. Instead, you initialized another (empty) router in main.js. Just import your router.js and then include it in your initialization of the app.

import router from 'router.js'; <--- your file

new Vue({
  router,       <--------- apply router
  render: h => h(App)
}).$mount("#app");

The last thing left is to define a place for the router components to render. That is accomplished by placing a <router-view> compenent somewhere in your app template.

<template>
  <v-app>
    <v-btn dark to="./components/CompanySignUp"> Sign up as a Company </v-btn>
    <v-btn dark to="./components/FreelanceSignUp"> Sign up as a Freelancer
    </v-btn>

    <router-view></router-view>  <------------- component rendered here
  </v-app>
</template>

For maintenance reasons, consider using the name parameter for the :to prop so you can minimize code changes if you ever need to update the path.

Leave a comment