Si agrega la vista del enrutador de acuerdo con los detalles de uso (si agrega la vista del enrutador de acuerdo con el sistema de administración en segundo plano)

Introducción: Todo el mundo sabe que el sistema de gestión de antecedentes de Ruoyi es un sistema de gestión de antecedentes de nivel empresarial desarrollado en base a SpringBoot, Spring Security, JWT, Vue y Element, que se puede utilizar para administrar sitios web corporativos, plataformas de comercio electrónico, aplicaciones móviles, etc. Un sistema de aplicación con buen rendimiento y experiencia de usuario. En la actualidad, hay docenas de k stars⭐ en GitHub y Gitee, que se pueden usar de forma gratuita, pero los usuarios también deben cumplir con los acuerdos de código abierto relevantes. Hoy compartiré cómo agregar pozos de enrutamiento de vista de enrutador en el sistema Zoyi .

1. Crear una nueva página ( sin navegación lateral )

1. Primero, cree una nueva carpeta de prueba debajo del archivo de vistas y luego cree one.vue y two.vue respectivamente;

2. Abra Ruoyi System > System Management > Menu Management, haga clic en el botón Agregar en la esquina superior izquierda, seleccione primero el menú, complete la ruta del componente,

Después de completar, cambie para seleccionar el directorio y luego confirme ;

 3. Luego agregue los directorios de archivos one.vue y two.vue respectivamente;

 

 4. De esta manera, puede ver el archivo recién agregado en la navegación lateral;

5. Agregue los códigos correspondientes en los archivos respectivamente, y se pueden lograr los siguientes efectos;

index.view

<template>
  <!-- test/index 路由坑位页面-->
  <center style="margin-top:50px">
    <div>
      <!-- 头部按钮 -->
      <div class="header_con">
        <button @click="$router.push('/test/one')">to one.vue</button>
        <button @click="$router.push('/test/two')">to two.vue</button>
      </div>
      <!-- 路由坑文件 -->
      <div class="router_content">
        <router-view></router-view>
      </div>
    </div>
  </center>
</template>

uno.vue

<template>
  <!-- one -->
  <div style="font-size:30px">
    这是one的页面元素
  </div>
</template>

dos.vue

<template>
  <!-- two -->
  <div style="font-size:30px">
    这是two的页面元素
  </div>
</template>

Efecto:

 La vista del enrutador se agregó con éxito, pero puede ver que ya no está en la misma página que la barra lateral de Ruoyi. Si desea usar la misma barra lateral, solo necesita agregar una capa más de anidamiento de archivos debajo del archivo de prueba. Bien, expliquemos en detalle a continuación, escenarios de uso específicos y distinciones específicas;

2. Usa la misma barra lateral ( con navegación lateral )

1. Si desea usar la barra lateral al mismo tiempo, debe agregar el archivo anidado anidado en el archivo de prueba y colocar el archivo vue en el archivo anidado (el contenido del archivo permanece sin cambios);

2. Vuelva a configurar la dirección de enrutamiento, haga clic en el menú modificar prueba, seleccione la opción de menú, elimine la ruta del componente y vuelva a seleccionar el directorio para confirmar ;

 3. Configure la capa de anidamiento, es decir, el archivo de vista del enrutador (la idea de agregar es la misma), primero seleccione el menú para completar la ruta del componente, después de completar, vuelva a seleccionar el directorio y haga clic en Aceptar ;

4. Luego haga clic en Agregar en el nido recién agregado y vuelva a agregar one.vue y two.vue (los anteriores one.vue y two.vue se pueden eliminar si no se usan);

 

estructura:

 5. De esta manera, se completan la nueva adición y la modificación, y se observa la nueva estructura y efecto del directorio;

Precauciones:

1. Configure el archivo de vista del enrutador. Cuando haga clic en Agregar, seleccione la opción de menú primero. Después de configurar la ruta del componente, seleccione la opción de directorio nuevamente y luego confirme.

2. Si cree que no hay problema con la ruta del componente y el archivo que configuró, pero hay un error en el salto, puede reiniciar el proyecto;

Espero que este artículo te pueda ayudar (●'◡'●)