Javascript 单击并更改url后如何更新组件？

我尝试使用vue路由器，但出现了一些问题

在呈现路由器链接的页面上，单击url更改。localhost/#/->localhost/#/contacts，但组件窃取主页。仅当页面重新加载时更新

main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './index.vue';
import Error404 from './404.vue';
import Routes from './route';


Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'hash',
    routes: Routes
});

window.onload = () => {
    new Vue({
        router: router,
        el: '#app-container',
        data: {
            currentRoute: window.location.hash.split('#')[1]
        },
        computed: {
            ViewComponent () {
                return Routes.filter(item => item.path == this.currentRoute)[0] || Error404
            }
        },
        render (h) { return h(this.ViewComponent.component ? this.ViewComponent.component : this.ViewComponent) }
    });
}

const routes = [
    {path: '/', component: mainPage},
    {path: '/example1', component: examplePage},
    {path: '/example2', component: exampleForm},
    {path: '/contacts', component: contacts}
];

export default routes

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

import Vue from 'vue'
import Router from 'vue-router'
import example1 from '@/components/example.vue'
import example2 from '@/components/example2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/example-1',
      name: 'example-1',
      component: example1
    }
    {
      path: '/example-2',
      name: 'example-2',
      component: example2
    }
  ]
})

route.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './index.vue';
import Error404 from './404.vue';
import Routes from './route';


Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'hash',
    routes: Routes
});

window.onload = () => {
    new Vue({
        router: router,
        el: '#app-container',
        data: {
            currentRoute: window.location.hash.split('#')[1]
        },
        computed: {
            ViewComponent () {
                return Routes.filter(item => item.path == this.currentRoute)[0] || Error404
            }
        },
        render (h) { return h(this.ViewComponent.component ? this.ViewComponent.component : this.ViewComponent) }
    });
}

const routes = [
    {path: '/', component: mainPage},
    {path: '/example1', component: examplePage},
    {path: '/example2', component: exampleForm},
    {path: '/contacts', component: contacts}
];

export default routes

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

import Vue from 'vue'
import Router from 'vue-router'
import example1 from '@/components/example.vue'
import example2 from '@/components/example2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/example-1',
      name: 'example-1',
      component: example1
    }
    {
      path: '/example-2',
      name: 'example-2',
      component: example2
    }
  ]
})

index.vue

<template lang="jade">
    div(id="app")
        router-link(to="/example1") Example1
        br
        router-link(to="/example2") Example2
        br
        router-link(to="/contacts") Contacts
</template>
<script type="text/javascript">
    export default {

    }
</script>

<template>
  <div id="app">
    <router-view/>
    <router-link to="example1">example1</router-link>
    <router-link to="example2">example2</router-link>

  </div>
</template>

div（id=“app”）
路由器链接（至=“/example1”）example1
溴
路由器链接（至=“/example2”）example2
溴
路由器链接（至=“/contacts”）联系人
导出默认值{
}

我通过添加

watch: {
            '$route'(to, from) {
                this.$router.go(this.$router.currentRoute)
            }
        }

---

对于main.js，但我认为这是一个非常糟糕的解决方案。

您缺少路由器视图。路由器需要显示的

请考虑基于：

的代码结构 main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './index.vue';
import Error404 from './404.vue';
import Routes from './route';


Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'hash',
    routes: Routes
});

window.onload = () => {
    new Vue({
        router: router,
        el: '#app-container',
        data: {
            currentRoute: window.location.hash.split('#')[1]
        },
        computed: {
            ViewComponent () {
                return Routes.filter(item => item.path == this.currentRoute)[0] || Error404
            }
        },
        render (h) { return h(this.ViewComponent.component ? this.ViewComponent.component : this.ViewComponent) }
    });
}

const routes = [
    {path: '/', component: mainPage},
    {path: '/example1', component: examplePage},
    {path: '/example2', component: exampleForm},
    {path: '/contacts', component: contacts}
];

export default routes

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

import Vue from 'vue'
import Router from 'vue-router'
import example1 from '@/components/example.vue'
import example2 from '@/components/example2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/example-1',
      name: 'example-1',
      component: example1
    }
    {
      path: '/example-2',
      name: 'example-2',
      component: example2
    }
  ]
})

---

您是否导入了route.js中的每个组件映射？[Vue warn]：您正在使用Vue的仅运行时版本，而模板编译器不可用。可以将模板预编译为呈现函数，也可以使用编译器附带的构建。（位于）