Abrir ruta en una página lateral utilizando Vue.js

Answer

1. 

   davy.ai

   July 29, 2023 at 4:59 am

   Para lograr esta funcionalidad, puedes utilizar el componente de diálogo de Quasar como la página lateral y vue-router para manejar el enrutamiento. Puedes crear un componente personalizado que acepte un objeto de ruta y abra el diálogo con el componente solicitado sin decoración. Aquí hay un esquema general de los pasos que puedes seguir:

   1. Crea un componente personalizado para la página lateral que renderice el componente solicitado dentro del diálogo.

   <template>
     <q-dialog v-model="mostrar" @hide="cerrar">
       <component :is="componente"></component>
     </q-dialog>
   </template>
   
   <script>
   export default {
     name: 'SidePage',
     props: {
       ruta: Object,
       onClose: Function,
     },
     data() {
       return {
         mostrar: false,
         componente: null,
       };
     },
     methods: {
       abrir() {
         this.mostrar = true;
         this.componente = this.ruta.componente;
       },
       cerrar() {
         this.mostrar = false;
         this.componente = null;
         if (this.onClose) this.onClose();
       },
     },
   };
   </script>
   

   1. Agrega una vista de enrutador con nombre para las páginas laterales en la configuración principal del enrutador.

   const rutas = [
     {
       path: '/sidepage',
       component: EnvoltorioPáginaLateral,
       children: [
         {
           path: ':nombre',
           name: 'sidepage',
           component: VistaPáginaLateral,
         },
       ],
     },
   ];
   

   1. En tu componente principal, crea un método para abrir la página lateral y utiliza el enrutador para navegar a la ruta con nombre.

    <template>
      <button @click="abrirPáginaLateral">Abrir página lateral</button>
    </template>
   
    <script>
    import { mapActions } from 'vuex';
   
    export default {
      methods: {
        abrirPáginaLateral() {
          const nombre = `sidepage_${Math.random().toString(36).substr(2, 9)}`;
          const ruta = { name: 'sidepage', params: { nombre } };
          this.$router.push(ruta);
          this.$store.dispatch('abrirPáginaLateral', { ruta, nombre });
        },
        ...mapActions(['abrirPáginaLateral']),
      },
    };
    </script>
   

   1. En Vuex, crea una acción para abrir la página lateral y almacenar su estado.

    const state = {
     paginasLaterales: {},
   };
   
   const getters = {
     paginaLateral: (state) => (nombre) => state.paginasLaterales[nombre],
   };
   
   const mutations = {
     abrirPáginaLateral(state, { nombre, ruta }) {
       state.paginasLaterales[nombre] = {
         ruta,
         mostrar: false,
       };
     },
     mostrarPáginaLateral(state, nombre) {
       state.paginasLaterales[nombre].mostrar = true;
     },
     ocultarPáginaLateral(state, nombre) {
       state.paginasLaterales[nombre].mostrar = false;
     },
   };
   
   const actions = {
     abrirPáginaLateral({ commit }, { nombre, ruta }) {
       commit('abrirPáginaLateral', { nombre, ruta });
       commit('mostrarPáginaLateral', nombre);
     },
     cerrarPáginaLateral({ commit, getters }, nombre) {
       commit('ocultarPáginaLateral', nombre);
       commit('eliminarPáginaLateral', nombre);
       const claves = Object.keys(getters.paginasLaterales);
       if (claves.length) {
         commit('mostrarPáginaLateral', claves[claves.length - 1]);
       }
     },
   };
   

   1. Por último, en el componente VistaPáginaLateral, recupera el objeto de ruta del almacén y pásalo al componente SidePage.

   <script>
   export default {
     name: 'VistaPáginaLateral',
     computed: {
       ruta() {
         const { nombre } = this.$route.params;
         return this.$store.getters.paginaLateral(nombre)?.ruta;
       },
     },
   };
   </script>
   
   <template>
     <sidepage :ruta="ruta" @cerrar="cerrar"></sidepage>
   </template>
   

   Con esta configuración, puedes abrir páginas laterales desde otras páginas laterales y cerrarlas de forma independiente. También puedes abrir una página lateral en una nueva ventana navegando directamente a la ruta con nombre y el atributo target="_blank" en el enlace o botón. Si bien esto no es una solución lista para usar, proporciona un buen punto de partida para personalizar según tus necesidades.

Comments are closed.