Proyecto VUE para crear artículos de enrutamiento

Creación de directorio de archivos

Si tiene sus propias opiniones sobre la creación de directorios de archivos, puede omitir esta sección y mirar directamente la sección de enrutamiento. Esta parte de mí es solo para dar algunas sugerencias a los estudiantes que no tienen suficiente experiencia laboral.

1. Los dos primeros capítulos ya han construido la parte básica del andamio vue, ahora comencemos la parte de creación del directorio de archivos del proyecto, cómo configurar claramente cada parte del directorio de archivos. En el proyecto recién creado, abrimos la carpeta src y puede ver los siguientes archivos:
   
   Por supuesto, estos archivos definitivamente no cumplirán con las necesidades de nuestro proyecto, así que prepárese para continuar creándolo usted mismo.

(1) Primero, creamos un archivo de recursos estáticos static. Los recursos estáticos almacenados en esta carpeta no serán empaquetados ni procesados ​​por webpack, por lo que generalmente colocamos imágenes, CSS o JS importados y otras cosas, recuerde, esta carpeta estática no ser empaquetado .
(2) Luego ingresamos al src y vemos la carpeta assets , que será empaquetada por webpack , así que si necesitamos algo de css para el proyecto, podemos ponerlo en él.
(3) La carpeta de componentes se usa para colocar la pieza del componente , y los componentes que encapsula se pueden almacenar en esta carpeta (PS: la denominación de los componentes debe estar estandarizada, como los nombres en inglés, como cuadros de viñetas, tablas, enlaces de varios niveles , etc., seguido de Después de que el componente esté parcialmente encapsulado, debe haber ejemplos de código, la configuración de cada parámetro y los comentarios deben ser claros; de lo contrario, es posible que olvide cómo usar su componente después de un tiempo y solo puede volver a visitarlo . También hice esto al principio .... Demasiado perezoso para escribir comentarios ...)
(4) carpeta del enrutador: esta carpeta está dedicada a almacenar el enrutamiento, todos los componentes de la página se pueden encontrar a través de este archivo. (Me enfocaré en ello más adelante)
(5) Carpeta de la tienda: generalmente almacena datos compartidos, es decir, vuex. Pero debido a que vuex es global, no es necesario para proyectos pequeños si no se utilizan, y casi todo el almacenamiento en caché y la comunicación de componentes se pueden completar.
(6) Ver carpeta: esta carpeta es la carpeta donde se almacenan todos los componentes de la página, y todas las páginas que escribe se colocan en esta carpeta.

Bueno, lo de arriba es el andamio que se ha creado, y abajo, tenemos que crear nosotros mismos los archivos requeridos.
(7) Por ejemplo, nuestro proyecto debe tener una solicitud , por lo que si crea una nueva carpeta https , puede ver de un vistazo que esta carpeta es para la solicitud.
(8) Además, puede haber muchos métodos repetidos en uno de nuestros proyectos. Estos métodos no se pueden escribir en todas las páginas. Por lo tanto, necesitamos una carpeta para almacenar métodos públicos , denominada publicMthods
(9) en uno. En el proyecto, el los más comunes deberían ser algunos cuadros desplegables, selección única, selección múltiple y similares, pero las opciones en los cuadros desplegables pueden ser devueltas por el backend, y una gran parte de ellas pueden ser estáticas, pero estas Los productos definitivamente no están seguros de que no se cambiarán. Sin embargo, si tenemos ese cuadro desplegable en cada página, pero ahora el producto nos permite cambiar la demanda, ¿se verá aturdido o saludará en silencio al producto? . . Este no es el producto. Podemos crear una carpeta de configuración para almacenar algunos elementos de configuración con factores inciertos. Luego puede encapsular un método que puede obtener el valor de la clave en el archivo publicMethods, de modo que ya sea que lo edite o lo muestre (debido a que el backend generalmente le devuelve el valor, el valor es un número, pero debe mostrar el nombre) , estarás muy relajado. [Según el método de obtención de nombre por valor, escríbalo hoy si tiene tiempo y agréguelo más tarde si no está libre. Le sugiero que lea mientras escribe, no copie directamente o se convertirá en un ingeniero de copias]
(10) Porque también dije, también agregaré varios idiomas al proyecto, por lo que debo crear una nueva carpeta de idiomas, este archivo La carpeta está configurada específicamente para varios idiomas, y el idioma no debe confundirse con otros archivos. Generalmente, los complementos de los idiomas internacionales que usamos son i18n, y el idioma de cada país corresponde a un archivo JS separado. En cuanto a cómo escribir internamente, eso es algo más adelante, veamos primero la parte de enrutamiento.
(11) Además, ahora solo somos la parte estática del front-end. Si el back-end no tiene una interfaz, definitivamente necesitamos simular los datos nosotros mismos, por lo que podemos usar mock.js (en Baidu, que nunca ha oído hablar de él, este complemento puede simular Data.), cree una nueva carpeta por separado. (Generalmente, el progreso del back-end en la empresa es aproximadamente una semana más rápido que el del front-end, pero algunas empresas no están descartadas ... La situación de que el back-end no ha comenzado, el front-end sí ya comenzó, por lo que nuestros datos de simulación definitivamente no caerán, y solo necesita hablar con el back-end Negociar la estructura de datos requerida)

Hay casi tantos directorios de archivos y funciones. Por supuesto, es posible que falten lugares, pero estos directorios de archivos ya pueden cumplir con los requisitos generales del proyecto. ¡Ahora podemos comenzar nuestro programa principal!

Artículos de enrutamiento (parte de configuración de enrutamiento)

Antes de comenzar nuestra ruta, ¡necesitamos conocer algunos puntos!
1: El enrutamiento controla los componentes de la página y la ruta de cada ruta corresponde a una página (es decir, la dirección HTTP que ve).
2: El enrutamiento puede controlar los permisos, por ejemplo, ciertas páginas solo se pueden ver después de iniciar sesión.
3: El enrutamiento puede transferir parámetros por salto de página.
4: El enrutamiento proporciona un método antes y después del salto.
Bueno, empieza a diseñar la parte de enrutamiento.
Abra la carpeta del enrutador, vemos que solo hay un archivo index.js, por supuesto, podemos escribir una ruta completa en este archivo, pero hay una deficiencia. Si tiene demasiadas páginas, sus páginas serán muy largas , Hay sus componentes de enrutamiento en el enrutamiento, los métodos de enrutamiento, etc.aparecerán desordenados, por lo que podemos tratarlo por separado, usando index.js como el archivo de entrada principal de enrutamiento, cree un nuevo view.js, este archivo JS solo almacena la configuración de enrutamiento del componente de la página.

Eliminamos la parte de enrutamiento de const = routes en el enrutador / índice original, y luego la agregamos en view.js, como se muestra en la siguiente figura:

Tenga en cuenta que en la Figura 2, esta variable const debe exportarse y luego importarse a index .js.Use (importar, exportar, exportar, puede consultar la gramática ES6 para obtener más detalles, sin más explicaciones). Luego, el parámetro importado se puede colocar como un parámetro de entrada en la instancia de vuerouter.
Podemos ver que la variable cuya instancia es el enrutador también se exporta en la Figura 1. Esta variable también es un parámetro de entrada en nuestro main.js, pero es solo un parámetro de entrada de la instancia de vue. Si no lo recuerda, por favor mire hacia atrás en la parte main.js.

Describamos brevemente los parámetros de entrada en el enrutador.
1: modo: Esto es para seleccionar el modo de enrutamiento. Hay dos parámetros, historial y hash. La diferencia entre los dos es que la ruta del enrutamiento es normal, pero se requiere que el back-end coopere con la configuración, de lo contrario generará un 404 cuando se redirija la página. Para el hash, solo agrega un signo # a la ruta,

2: Base: simplemente agregue una ruta después de la solicitud de ruta de la página. Por ejemplo, su solicitud originalmente era http: // localhost: 8080, y si configura un / aaa / en base, la ruta se convertirá en http: // localhost: 8080 / aaa /, puede probarlo usted mismo. Algunos backends pueden requerir que agregue esta configuración al enrutamiento, así que no olvide la función de este parámetro.

3: rutas: este parámetro es la ruta de su página.

Eche un vistazo a los parámetros más utilizados, como se muestra en la siguiente figura: 1: ruta: esta es la dirección de la ruta de la página, pero esta ruta se combina con la dirección de solicitud + configuración base + ruta de ruta para formar una ruta http completa.
Por ejemplo, su dirección de solicitud: http: localhost: 8080 y
su configuración base es: / admin /
Su ruta es / login,
luego la dirección que ingresa en la barra de URL es: http: localhost: 8080 / admin / login
Esta ruta es Puede acceder a la página (es decir, componente) que está configurando actualmente
2: nombre: De hecho, esto no es muy significativo, si necesita obtener este nombre, puede configurarlo en consecuencia. (En la actualidad, no me he encontrado con la situación de obtener este nombre, por lo que normalmente escribo el nombre de la página)
3: componente: este es el componente de su página. Mire la imagen de arriba e introduzca una página de componente de inicio (aquí es donde normalmente dibuja la página), y luego el valor de componente es esta página de componente.
4: También puede agregar un meta objeto, en el que puede agregar títulos o permisos de autenticación, de la siguiente manera:

const routes = [
	{
    
    
      path: '/',
      name: 'about',
      component: about,
      meta: {
    
    
      	auth: true, // 路由权限控制，true为有权限，false为不需要权限
      	title: '专门设置的页面标题'
      }
    }
]

Eso es todo para enrutamiento simple.

Por supuesto, si escribe así, se estima que su página seguirá girando cuando se abra. Debido a que esta es una aplicación de una sola página, puede comprender que solo hay una página, compuesta de muchas partes pequeñas, pero estas partes son relativamente grandes, entonces, ¿cómo resolverlo? Se puede decir que el enrutamiento es una carga diferida, que se implementa mediante componentes webpack y vue asincrónicos .
Por ejemplo, cuando necesite introducir un componente about, puede hacer lo siguiente:
Si ... / views / about es su ruta relativa

const about= () => import('../views/about')

Luego, puede importarlo en sus rutas de la siguiente manera:

const routes = [
    {
    
    
      path: '/views/about',
      name: 'about',
      component: about
    }
  ]

¡De esta manera, puede completar su enrutamiento!

Artículos de enrutamiento (parámetros de transferencia de ruta, salto)

1. Hablemos de la forma de enrutar los parámetros, los parámetros de nuestras páginas generales solo necesitan ser empalmados en la url, pero ¿cómo transmitir nuestra página única?
Vue-router proporcionado en varias participaciones masivas de la siguiente manera:
(1) Si estamos en el momento en que el salto de página (clic para saltar o saltar completado una operación como) puede ocurrir siguiendo los parámetros de transmisión:
primer paso: Necesitamos encontrar el saltar página en la ruta de view.js y agregar los parámetros de la siguiente manera:

En el segundo paso, pasamos los parámetros requeridos al saltar, de la siguiente manera:

let id = 110
this.$router.push({
    
    
  path: `/about/${
      
      id}`, // 跳转进about页面之后url会变成 /about/110
})

Paso 3: Ahora que saltamos a la página Acerca de y pasamos una identificación, ¿cómo la obtenemos? Podemos obtener lo siguiente directamente en la página Acerca de:

let getId = this.$route.params.id

En cuanto al salto de página, puede saltar de la misma forma que el anterior, por supuesto, también puede utilizar etiquetas:

<router-link to="/about">Home</router-link> |

Es muy conveniente saltar de esta manera, dependiendo de sus necesidades.
Muy bien, esto completa el salto de página y la transferencia de parámetros. Por supuesto, la transferencia de parámetros es uno o dos de ellos. También puede ir al sitio web oficial para ver otros métodos de salto y métodos de transferencia de parámetros, pero demasiados repetidamente.

De acuerdo, hagámoslo por hoy. Puede probarlo usted mismo. En cuanto a la parte de interceptación de enrutamiento (incluidos los permisos), debido a la gran cantidad de contenido, no lo compilaremos por el momento, no sea que el contenido sea demasiado para ser digerido. Explicaré uno más por separado aquí.

(PD: Mi ejemplo aquí es el establecimiento de la gestión de back-end, porque el sistema de back-end es bastante completo, si lo desea, puede prestar atención al proyecto completo, gracias por su apoyo, si encuentra un error, puedes contactar con el blogger. La originalidad no es fácil, ¡Gracias!)