Vue.js Vue Route和Axios don'；我们不能在同一页上一起工作

我正试图通过使用CDN同时使用axios和router，所以我有以下代码，当我尝试运行我的网页时会产生错误，我已经搜索了一整天，但无法控制自己，如果有人有想法，我将不胜感激

<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

      <script>
    new Vue({
          el: '#app',
          data() {
            return {
              listHotels: {},
              hotel: {
                name: '',
                price: 0,
                location: ''
              }
            }
          },
          methods: {
            getHotels() {
              axios.get('/database.json')
                .then(res => {
                  this.listHotels = res.data.hotels.data;
                });
            },
            addHotel() {
              if (this.hotel.name === '' || this.hotel.price <= 0 || this.hotel.location === '') {
                return alert('BOOOO ERROR');
              }

              const data = { ...this.hotel };
              axios.post('/hotels.php', data)
                .then(res => {
                  console.log(res.data);
                  this.getHotels();
                });

              this.hotel.name = '';
              this.hotel.price = 0;
              this.hotel.location = '';
            }
          },
          created() {
            this.getHotels();
          }
        });

    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

    const router = new VueRouter({
      routes // raccourci pour `routes: routes`
    })

    const app = new Vue({
      router
    }).$mount('#app')
    </script>

---

另外，当我删除这些代码中的一个，axios或route时，它也会工作。

为什么要创建两个单独的Vue实例？有没有办法将两者放在同一个实例中？完全删除第二个

新Vue

，将第一个

新Vue

向下移动到底部，然后将

路由器作为配置选项传递，和其他人一起。好的，谢谢！为什么要创建两个单独的Vue实例？有没有办法将两者放在同一个实例中？完全摆脱第二个
新Vue
，将第一个
新Vue
移动到底部，然后将
路由器作为配置选项与所有其他实例一起传递。好的，谢谢！
A cookie associated with a cross-site resource at http://cloudflare.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.