unable to show signup page vue.js

Question

I am unable to route to signup page when goto signup button is pressed, I have attached the code snippets below.

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

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. Any help would be appreciated. Thanks in anticipation.

Answer 1

If App.vue is where you're defining your main Vue instance, you will need to add the router to it:

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

<template>
<v-app>
  <v-content>
    <v-btn :to="{ name:'signup'}">GOTO SIGNUP</v-btn>
    <router-view></router-view>
  </v-content>
</v-app>
</template>