In the process of developing a Vue-based web application that utilizes vue-router in history mode, everything was functioning smoothly for navigating between various pages. However, a new request has been made to open certain pages within a virtual dialogue, which is causing some complications. Initially, we attempted using an iframe for this purpose, but it resulted in a loading impact.
It's important to note that the 'virtual dialogue' referred to is essentially a styled div meant to appear above the rest of the content like a window, capable of displaying other pages within the Vue app. It should not be mistaken for a genuine browser level dialogue box.
The structure of our site is as follows:
- components/ContentDialogue.vue
- layout/MainLayout.vue
- pages/
- MyPage.vue
- MyPage2.vue
- MyPage3.vue
- router/index.js <-- router setup here
- App.vue
- main.js
MainLayout contains a <router-view/>, allowing the appropriate content to be displayed when entering a specific path.
The introduction of the dialogue poses challenges, as it needs to have the ability to display any of the other pages within the frame. This leads to the suggestion that MainLayout.vue should be structured as follows:
<template>
<div class="layout main-layout">
<div class="page-container">
<router-view />
</div>
<div v-if="showDialogue" class="dialogue-page-container">
<router-view />
</div>
</div>
</template>
The Vue router is configured in the router/index.js and integrated into the main file as shown below:
const app = {
router,
render: h => h(App)
};
const vue = new Vue(app);
vue.$mount('#app');
Although the concept appears sound, I'm uncertain about how to implement it practically. For the dialogue feature, options include triggering its opening through an event passed to MainLayout or incorporating it in a query value such as /mypage?popup=/mypage2. The challenge lies in translating this to the router and layout structures effectively.
If anyone has suggestions on how we can successfully execute this, your input would be greatly appreciated.