"未註冊的Vue路由"

Question

我正在嘗試為現有的網路應用程式新增新的路由：

這是入口點：

// main.js
import router from './router';

... etc

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

這是路由器：

// router/index.js
import AffiliateLinks from '../modules/affiliate_links/AffiliateLinks.vue';

Vue.use(VueRouter);

const routes = [
... etc
  {
    path: '/affiliate-links/client',
    component: AffiliateLinks,
    meta: {
      restricted: 'CLIENT',
    },
  },
];

const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  ... etc

  // check routes restricted by distribution channel
  if (to.meta?.restricted && !to.meta.restricted.includes(store.state.user.access.distribution_channel)) {
    next({ path: '/' });
    return;
  }

  // user is logged in, allow requested routing
  next();
});

export default router;

// 這是父元件：

// AffiliateLinks.vue
<template>
  <v-container fluid>
    <v-row align-content="space-between">
      <h3>String Here</h3>
      <v-btn @click.stop="showAffiliateLinksModal = true" />
    </v-row>
    <AffiliateLinksModal v-model="showAffiliateLinksModal" @close="showAffiliateLinksModal = false" />
  </v-container>
</template>

<script>
import AffiliateLinksModal from './AffiliateLinksModal.vue';
export default {
  name: 'AffiliateLinks',
  components: {
    AffiliateLinksModal,
  },
  data() {
    return {
      showAffiliateLinksModal: false,
    };
  },
};
</script>

// 這是子元件：

// AffiliateLinksModal.vue
<template>
  <v-dialog v-model="value" max-width="450px">
    <v-card>
      <v-card-actions>
        <v-btn @click.stop="$emit('close')">String Here</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: 'AffiliateLinksModal',
  props: ['value'],
};
</script>

一切看起來都很簡單，但是當我檢查Vue開發工具時，我看不到新的路由，當我點擊元件，例如

<v-card :to="url">
  ... etc
</v-card>

沒有任何反應。

Answer 1

我弄清楚了。

我結束了一天的工作，並將我的變更提交到遠端倉庫。 這時我注意到路由器上的變更不見了。 我可以在文字編輯器和本地Git工作更改中看到這些更改，但它們無法推送到遠端倉庫。

值得注意的是：我刪除了本地倉庫，並在同一位置重新克隆，但問題仍然存在。

我建立了一個臨時資料夾，問題就解決了...