[英]unable to show signup page vue.js
I am unable to route to signup page when goto signup button is pressed, I have attached the code snippets below. 按下goto signup按钮后,我无法路由至注册页面,我已附上以下代码段。
SignUp.vue 注册
<template>
<v-app id="inspire">
<v-content>
<v-container
fluid
fill-height
>
<v-layout
align-center
justify-center
>
<v-flex
xs12
sm8
md4
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>SIGNUP FORM</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Email"
name="email"
type="text"
></v-text-field>
<v-text-field
id="password"
label="Password"
name="password"
type="password"
></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary">SIGN UP</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</template>
router.js router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import SignUp from './views/SignUp.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: Home,
},
{
path: '/signup',
name: 'signup',
component: SignUp,
},
],
});
App.vue 应用程序
<template>
<v-app>
<v-content>
<v-btn :to="{ name:'signup'}">GOTO SIGNUP</v-btn>
</v-content>
</v-app>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
//
}),
};
</script>
When I execute this code there is no error in console and everything compiles correctly I am able to see "GOTO SIGNUP" button but when I click it nothing happens no errors,nothing happens, can you please help me to reroute to signup page I am using feathersjs,vue.js and vuetify. 当我执行此代码时,控制台中没有错误,并且一切都正确编译,我能够看到“ GOTO SIGNUP”按钮,但是当我单击该按钮时,没有任何反应,没有错误,没有任何反应,请您帮我重新路由到我的注册页面使用feathersjs,vue.js和vuetify。 Any help would be appreciated.
任何帮助,将不胜感激。 Thanks in anticipation.
谢谢您的期待。
If App.vue is where you're defining your main Vue instance, you will need to add the router to it: 如果要在App.vue中定义主Vue实例,则需要向其添加路由器:
<script>
import 'router' from 'router.js'
export default {
name: 'App',
router,
components: {
},
data: () => ({
//
}),
};
</script>
Also, as @Alexander Staroselsky mentioned in the comment , you will need to add a <router-view>
element so Vue knows where to render the route component. 另外,正如注释中提到的@Alexander Staroselsky一样 ,您将需要添加
<router-view>
元素,以便Vue知道在何处呈现路线组件。
<template>
<v-app>
<v-content>
<v-btn :to="{ name:'signup'}">GOTO SIGNUP</v-btn>
<router-view></router-view>
</v-content>
</v-app>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.