vue-routerで思い通りにページ遷移ができません。ボタンを押したら新しいページに切り替わるようにしたいです。

発生している問題

vue.jsでwebアプリを作っていますがvue-routerでページ遷移しようとするとこうなりました。

目標としては、「スキップ」を押すと

ここだけ表示するようにしたいのですが…

ソースコード

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width,initial-scale=1.0">
8    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9    <title>my-project</title>
10  </head>
11  <body>
12    <noscript>
13      <strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14    </noscript>
15    <div id="app"></div>
16    <!-- built files will be auto injected -->
17  </body>
18</html>
19

vue
1<!-- HelloWorld.vue -->
2
3<template>
4  <div class="/hello">
5    <center><h1>○○</h1></center>
6    <h3>ようこそお越しくださいました！！</h3>
7    <h3>アカウントをお持ちでない方はこちらからご登録なさって下さい</h3>
8    <br>
9    <a href="file:///D:/vue2/index.html" class="btn">新規登録</a>
10    <h3>アカウントをお持ちの方はこちらからログインなさって下さい</h3>
11      <p>メールアドレス：
12    <input v-model="mailaddress" placeholder="example@xxx.com" size="30" maxlength="30">
13    </p>
14    <p>パスワード：<input type="password" v-model="password" placeholder="(例)a1b2c3d4..." size="30" maxlength="30"></p>
15    <center><a href="/login" class="btn">ログイン</a></center>
16    <br>
17    <hr>
18    ＞<li><router-link to="/skip">スキップ</router-link></li>
19    <router-view/>
20    
21  </div>
22</template>
23
24<script>
25export default {
26  name: 'HelloWorld',
27  props: {
28    msg: String
29  }
30}
31</script>
32
33<!-- Add "scoped" attribute to limit CSS to this component only -->
34<style scoped lang="stylus">
35h3
36  margin 20px 0 0
37
38ul
39  list-style-type none
40  padding 0
41
42li
43  display inline-block
44  margin 0 10px
45
46.btn{
47  border: 1px solid green;
48  border-radius: 10px;
49  background-color: #7fffd4;
50  padding: 15px;
51  text-align: center;
52  color: #fff7e6;
53  width: 150px;
54}
55a
56  color #fff7e6
57
58b
59  color #fff7e6
60</style>
61

vue
1<!-- skip.vue -->
2
3<template>
4  <div class="/skip">
5    <p>スキップした場合、以下の機能が使えません。</p>
6    <p>・○○の作成</p>
7    <p>・団体への参加</p>
8    <a>続ける</a>
9  </div>
10</template>
11<script>
12export default {
13  name: 'skip', 
14  data(){
15    return{
16      
17    }
18  }
19  
20}
21
22</script>
23

javascript
1//main.js
2
3import Vue from 'vue'
4import App from './App.vue'
5import router from './router'
6import store from './store'
7import hello from './components/HelloWorld.vue'
8import skip from './components/skip.vue'
9
10Vue.config.productionTip = false
11
12new Vue({
13  router,
14  store,
15  render: h => h(App)
16}).$mount('#app')
17

vue
1<!-- App.vue -->
2
3<template>
4  <div id="app">
5    <div id="nav">
6       <HelloWorld/>
7    </div>
8    <router-view/>
9  </div>
10</template>
11<style lang="stylus">
12#app
13  font-family 'Avenir', Helvetica, Arial, sans-serif
14  -webkit-font-smoothing antialiased
15  -moz-osx-font-smoothing grayscale
16  text-align left
17  color #2c3e50
18
19#nav
20  padding 30px
21  a
22    font-weight bold
23    color #2c3e50
24    &.router-link-exact-active
25      color #42b983
26</style>
27<script>
28// @ is an alias to /src
29import HelloWorld from '@/components/HelloWorld.vue'
30
31export default {
32  name: 'home',
33  components: {
34    HelloWorld
35  }
36}
37</script>

javascript
1//router.js
2
3import Vue from 'vue'
4import Router from 'vue-router'
5import hello from './components/HelloWorld.vue'
6import skip from './components/skip.vue'
7import login from './components/login.vue'
8Vue.use(Router)
9
10export default new Router({
11  mode: 'history',
12  base: process.env.BASE_URL,
13  routes: [
14    {
15      path: '/hello',
16      name: 'hello',
17      component: hello
18    },
19    {
20      path: '/login',
21      name:'login',
22      component: login
23    },
24    {
25      path: '/skip',
26      name:'skip',
27      component:skip
28    },
29    {
30      path: '/about',
31      name: 'about',
32      // route level code-splitting
33      // this generates a separate chunk (about.[hash].js) for this route
34      // which is lazy-loaded when the route is visited.
35      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
36    }
37  ]
38})
39

試したこと

とりあえず解決するために調べてコードを変更しまくりましたが、別の問題が発生するばかりです。vueの初心者なので、分からない事ばかりです...

補足情報（FW/ツールのバージョンなど）

PS C:\Users\○○\vue1\my-project> vue --version
3.11.0
PS C:\Users\○○\vue1\my-project> node -v
v10.16.3

行動規範の内容に同意します

回答1件

自己解決

すみませんなかなか回答がなかったのでもうちょっと試行錯誤したら解決しました！

vue
1<!-- HelloWorld.vue -->
2
3<template>
4  <div class="/"><!-- ここが変わりました -->
5    <center><h1>回覧板アプリ</h1></center>
6    <h3>ようこそお越しくださいました！！</h3>
7    <h3>アカウントをお持ちでない方はこちらからご登録なさって下さい</h3>
8    <br>
9    <a href="file:///D:/vue2/index.html" class="btn">新規登録</a>
10    <h3>アカウントをお持ちの方はこちらからログインなさって下さい</h3>
11      <p>メールアドレス：
12    <input v-model="mailaddress" placeholder="example@xxx.com" size="30" maxlength="30">
13    </p>
14    <p>パスワード：<input type="password" v-model="password" placeholder="(例)a1b2c3d4..." size="30" maxlength="30"></p>
15    <center><a href="/login" class="btn">ログイン</a></center>
16    <br>
17    <hr>
18    ＞<li><router-link to="/skip">スキップ</router-link></li>
19    <router-view/>
20    
21  </div>
22</template>
23・・・

vue
1<!-- App.vue -->
2
3<template>
4  <div id="app">
5    <div id="nav">
6　　<!-- ここ何もいりません -->
7    </div>
8    <router-view/>
9  </div>
10</template>
11・・・