最近在練習vue,使用cdn在index.html引入vue和vue-router,並且使用httpVueLoader套件編譯vue檔案,設定路由時遇到一個問題

目前做到的是網址列會隨著我的sidebar選擇改變但router-view 沒有顯示

不知道是component擺放的方式不對還是路由設定錯誤,再麻煩大神們為我解惑

index.html

//上略
 <div id="app">
    <app-content></app-content>
 </div>


<script src="./api/server.js"></script>
<script>
    const routes = [
    { path: "/",component: httpVueLoader("./view/app-content.vue")},
    { path: "/dashboard", component: httpVueLoader("./view/dashboard.vue") },
    { path:"/transaction",component:httpVueLoader("./view/transaction.vue") },
    { path: "/payment", component: httpVueLoader("./view/payment.vue") },
    { path: "/setting", component: httpVueLoader("./view/setting.vue") },
    ];
    const originalPush = VueRouter.prototype.push;

    VueRouter.prototype.push = function push(location) {
        return originalPush.call(this, location).catch((err) => err);
    };

    const router = new VueRouter({
        mode: "history",
        base: "/dist/",
        routes,
    });

    var app = new Vue({
        router,
        data: {

        },
        components: {
            'app-content': httpVueLoader('./view/app-content.vue'),
        },
        methods: {
        },
    }).$mount('#app')

</script>

app-content.vue

<template>
  <div>
    <login @user-login="getLogin()"></login>
    <sidebar @uri="uri()"></sidebar>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
;

module.exports = {
  data: function () {
    return {
      enter: false,
      componentName: "",
    };
  },
  mounted() {},
  components: {
    login: httpVueLoader("./login.vue"),
    sidebar: httpVueLoader("./sidebar.vue"),
  },
  methods: {
    uri(uri) {
      this.componentName = uri;
      this.$router.push(this.componentName);
    },
    getLogin(boolean) {
      this.enter = boolean;
    },
  },
};
</script>

sidebar.vue

<template>
  <div>
    <nav class="sidebar">
      <img src="images/logo.svg" alt="" class="mt-4 mb-4" />
      <p class="nav_item">
        <img src="images/dashboard-s.svg" class="mr-1" />
        <router-link to="/dashboard" @click.native="send('/dashboard')"
          >總覽</router-link
        >
      </p>
      <p class="nav_item">
        <img src="images/search-s.svg" class="mr-1" />
        <router-link to="/transaction" @click.native="send('/transaction')"
          >查詢</router-link
        >
      </p>
      <p class="nav_item">
        <img src="images/payment-s.svg" class="mr-1" />
        <router-link to="/payment" @click.native="send('/payment')"
          >列表</router-link
        >
      </p>
      <p class="nav_item">
        <img src="images/more-s.svg" class="mr-1" />
        <router-link to="/setting" @click.native="send('/setting')"
          >設定</router-link
        >
      </p>
    </nav>
  

     
   
  </div>
</template>
<script>
module.exports = {
  data: function () {
    return {};
  },
  components: {},
  methods: {
    send(uri) {
      this.$emit("uri", uri);
    },
  },
};
</script>