vue-router不会在路由更改时呈现新组件

Question

我有一个非常简单的带有vue-router的最小示例页面，该页面仅部分起作用。

app.js

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')

app.vue

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

router.js

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"
  }
})

<router-view>似乎在首页加载时起作用。它显示了我对url中当前存在的任何路由所期望的组件（例如localhost/test#/page2），或者如果我在将Vue绑定到#app之前显式地对route.push进行了显示，那么它也会显示期望的组件。

导航到其他路线似乎无法正常工作，或者至少没有呈现新路线。当我将调试输出添加到页面组件时，如下所示：

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

它正在接收路由输入/离开事件。我似乎可以在路线之间来回导航，但是直到页面重新加载后您才能看到结果

我无法在jsfiddle中重新创建问题，并且我已废弃所有内容并重新开始，但得到的结果相同。通过查看Vue Router documentation，看不到我做错了什么。知道我在这里缺少什么吗？

Answer 1

在这种情况下，答案很简单。页面上其他地方还有另一个Vue实例。即使我的理解是分开的，绑定到不同容器元素的Vue实例应该能够和谐地存在，但在这种情况下不是这样。这也是破坏Vue开发工具的原因，例如显示了Vuex实例，但未显示任何已加载的组件，并且在Vue开发工具错误中给出了Cannot read property '__VUE_DEVTOOLS_UID__' of undefined错误。