Vue-router and multiple routes in same page?

Question

We are creating a Vue based web app that uses vue-router in history mode. Everything works for navigating between different pages, but now we have been asked to open some of the pages in a virtual dialogue, which now causes problems. Initially we tried using an iframe, but this creates a loading impact.

Note the 'virtual dialogue' is simply a div that is designed to sit above the rest of the content, that is decorated as a window and can show other pages within the Vue app. It is not a real browser level dialogue.

The way we have structure out site:

• components/ContentDialogue.vue
• layout/MainLayout.vue
• pages/
  • MyPage.vue
  • MyPage2.vue
  • MyPage3.vue
• router/index.js <-- router is setup here
• App.vue
• main.js

Here the MainLayout has a <router-view/> , so that when we type in the a path it will display the appropriate content.

The dialogue breaks things, since it technically needs to be able to show any of the other pages in the frame. This leads to the idea, that the MainLayout.vue becomes:

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

Vue router is setup in the router/index.js and made available in the main as:

  const app = {
    router,
    render: h => h(App)
  };

  const vue = new Vue(app);
  vue.$mount('#app');

While this looks fine conceptually, I a not sure how I can make it work for real. For the dialogue, we could either indicate it opening via an event passed to the MainLayout or include it in a query value such as /mypage?popup=/mypage2 , but then how does that translate to the router and layout?

Can anyone suggest how we could make this work?

Answer 1

to display multiple views at the same time instead of nesting them, eg creating a layout with a sidebar view and a main view. This is where named views come in handy. Instead of having one single outlet in your view, you can have multiple and give each of them a name. A router-view without a name will be given default as its name.

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

A view is rendered by using a component, therefore multiple views require multiple components for the same route. Make sure to use the components (with an s) option:

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // short for LeftSidebar: LeftSidebar
        LeftSidebar,
        // they match the `name` attribute on `<router-view>`
        RightSidebar,
      },
    },
  ],
})

for full explination see:https://next.router.vuejs.org/guide/essentials/named-views.html