如何在定向到另一个组件的按钮上执行单击方法?

我有两个包含表单的注册组件，一个用于以个人身份注册的人，另一个用于注册为企业的人，我有一个主页组件，上面有两个大按钮，标有"单击此处以个人身份注册"，"单击此处注册为企业"。如何在 Vue 上链接这些组件？我希望单击按钮后组件会在同一页面上呈现，而不是新选项卡。

提前感谢！

迄今

尝试配置路由器.js(我有一种感觉，这可能是我的问题所在( 将路线添加到 V 按钮

App.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
}
]
});

主.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");

这听起来像是使用vue-router的好机会，但有多种方法可以解决这个问题。根据范围的不同，可能有多个好的答案。上面有关于使用发射器和道具的评论，这很好，但我建议使用vue-router，因为它是为这种动态组件切换而设计的。如果您使用了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>

这种方法有多种好处：

Vue 路由器得到了 Vue 社区的良好支持，因此您可以找到很多文档和示例。
您的最终用户可以访问mysite.com/register/business并登陆正确的页面，如果他们决定离开您的页面并返回，则不必单击按钮。
大部分逻辑被库抽象出来，而不必做复杂的条件逻辑和事件发射器。

这是一个非常简单的示例，严重依赖于此处的"入门"文档。如果您确实使用vue-cli启动了项目，您应该能够运行vue add vue-router，如果您在项目创建过程中错过了该步骤，它应该会为您进行一些设置，否则您可以使用 npm 并手动设置。

假设你的 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>

您正确定义了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>

出于维护原因，请考虑对:toprop 使用name参数，以便在需要更新路径时最大限度地减少代码更改。

相关内容

最新更新

热门标签：