Vue-routerでurlは変わるが遷移しない

Question

##実現したいこと
vue-routerを使い、ページを遷移しようとしています。
##発生している問題
ちゃんとpathを指定してコンポーネントを指定しているが、遷移できない。
エラーもでないです。
#ソースコード

//Main.js

import Vue from "vue";
import VueRouter from "vue-router";
import Vuex from "vuex";
import App1 from "./App1.vue";
import App2 from "./App2.vue";

Vue.config.productionTip = false;

Vue.use(Vuex);
Vue.use(VueRouter);

const router = new VueRouter({
  routes:[
    {
      path:'/learn',
      component:App1
    },
    {
      path:'/seach',
      component:App2
    }
  ]
});

const store = new Vuex.Store({
  state:{
    karutas:"省略"
  }
});

new Vue({
  el:"#app",
  store,
  router
});

//App2.js

<template>
    <div>
        <input type="text" placeholder="Enter some word">
    </div>
</template>
<script>
export default {
    data(){
        return {sword:""}
    },
    beforeRouteUpdate(to,from,next){
        next();
    }
}
</script>

##試したこと
beforeRouteUpdateを使って見たのですが変わりませんでした

Answer 1

表示しているページに <router-view> タグは記述していますか？

名前から誤解しがちですが、vue-router はマッチしたパスに移動するのではなく、マッチしたパスに相当するコンポーネントを<router-view>にマウントするフレームワークです。

そのため、ページ全体がマッチしたコンポーネントに置き換わるわけではありません。

例

<div id="app">
  <ul>
    <li><router-link to="/learn">SHOW APP 1</router-link></li>
    <li><router-link to="/search">SHOW APP 2</router-link></li>
  </ul>
  
  <!-- ↓こいつが必要 -->
  <router-view />
</div>

Answer 2

router-linkのtoをsearchにしてrouterの方をseachにしていました。