我正在尝试向现有的Web应用程序添加新的路由：

这是入口点：

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

// 这是子组件：

// AffiliateLinksModal.vue

一切看起来都很简单，但是当我检查Vue开发工具时，我看不到新的路由，当我点击组件，比如

  ... etc

没有任何反应。