问vue-路由器在路由更改时不呈现新组件

EN

import 'babel-polyfill';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
import router from './router'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

<template>
  <div class="container">
        <div id="nav">
          <router-link to="/">Page 1</router-link>|
          <router-link to="/page2">Page 2</router-link>
          <router-link to="/sretbs">No page</router-link>
        </div>
        <div style="border:5px solid green">
          <router-view></router-view>
        </div>
  </div>
</template>

<script>
export default {};
</script>

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from './page1.vue';
import Page2 from './page2.vue';
import ErrorPage from './error.vue';

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/page1', name: 'page1', component: Page1 },
    { path: '/page2', name: 'page2', component: Page2 },
    { path: '*', component: ErrorPage }
  ],
  redirect: {
    "/": "page1"
  }
})

<template>
  <div class="container">
    <h2>this is page 2</h2>
    <buttons></buttons>
  </div>
</template>

<script>
export default {
  beforeRouteEnter: function(to, from, next) {
    console.log(`Entering page 2:`);
    next();
  },
  beforeRouteLeave: function(to, from, next) {
    console.log(`Leaving page 2`);
    next();
  },
  beforeRouteUpdate: function() {
    console.log(`Before route update`);
  }
};
</script>