Как мне сделать метод нажатия на кнопку, которая указывает на другой компонент? - PullRequest
Новая
       4

Как мне сделать метод нажатия на кнопку, которая указывает на другой компонент?

0 голосов
/ 22 января 2020

У меня есть два компонента для подписки, которые содержат формы, один для тех, кто регистрируется как физическое лицо, а другой - как бизнес. У меня есть компонент главной страницы с двумя большими кнопками с надписью «Нажмите здесь, чтобы зарегистрироваться как личность», «Нажмите здесь, чтобы зарегистрироваться как бизнес». Как связать эти компоненты на Vue? Я надеюсь, что при нажатии кнопки компонент будет отображаться на той же странице, а не на новой вкладке.

Заранее спасибо!

Пока что

Попытка настроить маршрутизатор. js (у меня такое ощущение, что это может быть моя проблема) Добавлены маршруты к кнопке v

Приложение. vue 

<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>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

  data: () => ({
    //
  })
};
</script>

маршрутизатор. js

import Vue from "vue";
import Router from "vue-router";
import CommpanySignUp from "./components/CompanySignUp";
import FreelancerSignUp from "./components/FreelancerSignUp";

Vue.use(Router);

const router = new Router({
 mode: "history",
 base: process.env.BASE_URL,
 routes: [
   {
     path: "./components/CompanySignUp",
     name: "Company Sign Up",
     component: CommpanySignUp
   },
   {
     path: "./components/FreelancerSignUp",
     name: "Freelancer Sign Up",
     component: FreelancerSignUp
   }
 ]
});

main. js

import Vue from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import VueRouter from "vue-router";

Vue.use(VueRouter);
Vue.config.productionTip = false;

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

Ответы [ 3 ]

0 голосов
/ 22 января 2020

Предполагая, что ваш vue маршрутизатор уже работает, и вы уже отобразили свой компонент. То, что вы сделали, уже правильно, просто выполните следующие шаги, чтобы заставить его работать.

Первый поставьте вид роутера в вашем главном приложении. как показано ниже 

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

Второй Измените имя вашего маршрута на это, это имя маршрута будет использоваться для вызова самого компонента. 

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

Наконец, в вашем основном, окончательная структура выглядит следующим образом 

<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 голосов
/ 22 января 2020

Ваш router.js файл определен правильно, но вы никогда не включали его в свое приложение. Вместо этого вы инициализировали другой (пустой) маршрутизатор в main.js. Просто импортируйте ваш router.js и включите его в инициализацию приложения. 

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

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

Последнее, что осталось сделать, - это определить место для рендеринга компонентов маршрутизатора. Это достигается размещением компонента <router-view> где-нибудь в шаблоне вашего приложения. 

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

В целях обслуживания рассмотрите возможность использования параметра name для :to prop, чтобы вы могли минимизировать изменения кода, если вам когда-либо понадобится обновить путь.

0 голосов
/ 22 января 2020

Звучит как хорошая возможность использовать vue-router, но существует несколько подходов к этой проблеме. В зависимости от области может быть более одного хорошего ответа. Выше есть комментарий об использовании эмиттеров и реквизита, что вполне нормально, но я бы рекомендовал использовать vue-router, потому что он сделан для такого рода динамического переключения компонентов c. Если вы использовали vue-cli, добавить его будет тривиально, но в следующем примере для краткости используются автономные CDN. Все это может быть сделано в отдельных файлах, и у vue-cli уже будет хорошая платформа для вас, если вы хотите посмотреть, как это делается. 

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>

У этого подхода есть несколько преимуществ:

  1. Vue маршрутизатор поддерживается сообществом Vue очень хорошо, поэтому Вы можете найти много документации и примеров.
  2. Ваш конечный пользователь может посетить mysite.com/register/business и попасть на нужную страницу, вместо того, чтобы go нажать кнопку, если он решит покинуть вашу страницу и вернись.
  3. Большая часть логики c отводится библиотекой вместо необходимости создавать сложные условные логики c и источники событий.

Это очень простой пример, который в значительной степени опирается на документацию по началу работы здесь . Если вы начали свой проект с vue-cli, вы сможете запустить vue add vue-router, что должно сделать некоторые настройки для вас, если вы пропустили этот шаг в процессе создания проекта, в противном случае вы можете использовать npm и устанавливать вещи вручную.

...