Vue - The Road to Enterprise/

...

/

Route Controlled Panel Modals

Route Controlled Panel Modals

Learn how to control panel modals using routes.

We'll cover the following...

Scenario

From time to time, we might want to display a modal in our application. Suppose a user is browsing through a list of products. When the product is clicked on, a panel modal could slide in and display more information about the product. Technically, we could just add a panel modal component and control its visibility using the v-if directive and a boolean flag. The problem with this approach is that if a user opens the product panel and then refreshes it, the panel will no longer be visible. Similarly, if a user visits the page with a modal through a specific URL, it also won’t be visible. This scenario could be handled by adding a query param to the URL like &productModalOpen=true, but we’d have to programmatically check for its existence and update the isOpenPanel flag accordingly. We can automate this if we associate a panel modal with a specific route.

Implementation

Let’s start with the routes config.

Note: If we want to follow this example from scratch, we can scaffold a new Vue 3 project. Otherwise, we can see this example in the Companion App.

Press + to interact
// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import PanelModalExample from "@/views/panelModalExample/PanelModalExample.vue"; 
import ViewProductPanel from "@/views/panelModalExample/views/ViewProductPanel.vue";
const routes = [ 
  {
    path: "/panel-modal-example",
    name: "PanelModalExample",
    component: PanelModalExample,
    children: [
      {
        path: ":id",
        name: "ViewProductPanel",
        component: ViewProductPanel,
      }, 
    ],
  }, 
];
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL), 
    routes,
});
export default router;
...