"Unregistered Vue route"
I'm trying to add a new route to an existing web application:
This is the entry point:
// main.js
import router from './router';
... etc
new Vue({
router,
... etc
render: (h) => h(App),
}).$mount('#app');
This is the router:
// 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;
// This is the parent component:
// 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>
// This is the subcomponent:
// 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>
Everything looks simple, but when I check the Vue dev tools, I don't see the new route when I click on the component, like
<v-card :to="url"> ... etc </v-card>
No response.
