Hay dos tipos de rutas, las relativas y las absolutas. Las relativas dependen del directorio desde donde empiece, ya sea donde este ejecutando como de donde este configurado el directorio por defecto. Las absolutas empiezan con / y son independientes del directorio que se ejecute. No siempre podemos usar rutas absolutas.
Además existen dos nombres especiales:
.El directorio actual..El directorio padre (el que esta arriba en la estructura)
En el ejemplo de abajo estamos ejecutando el proyecto desde C:/Mis Documentos/App, el directorio de la web esta en C:/Mis Documentos/App/public y la función asset(archivo) nos devuelve la ruta absoluta desde la carpeta assets.
💽 C:/
\_📁 Mis Documentos
..\_📁 App
....\_📁 assets
....|.\_📁 imagenes
....|.|.\_📁 banners
....|.|.|.\_📁 2021
....|.|.|...\_📁 cybermonday
....|.|.|.....\_📄 desktop.jpg
....|.|.|.....\_📄 mobile.jpg
....|.|.\_📁 productos
....|.|...\_📄 taza.jpg
....|.|...\_📄 vaso.jpg
....|.\_📁 fuentes
....|...\_📄 Sonata.ttf
....\_📁 config
....|.\_📄 config.json
....\_📁 node_modules
....\_📁 public
....|.\_📁 css
....|.|.\_📄 estilos.css
....|.\_📁 js
....|.|.\_📄 output.js
....|.\_📁 ayuda
....|.|.\_📄 contactanos.html
....|.|.\_📄 faq.html
....|.\_📄 favicon.ico
....|.\_📄 index.html
....\_📁 src
....|.\_📁 productos
....|...\_📄 productos.js
....|.\_📁 usuarios
....|...\_📄 login.js
....|...\_📄 registro.js
....|.\_📄 app.js
....\_📄 package.json
Para el proyecto la ruta al archivo principal de js es src/app.js. También podría ser ./src/app.js o como ruta absoluta /Mis Documentos/App/src/app.js.
- Cual es la ruta relativa de la configuracion
config.json? - Cual es la ruta absoluta al
package.json?
Dentro del código usamos assets('imagenes/productos/taza.jpg') para obtener la ruta de la imagen de la taza. Podríamos usar assets('../public/favicon.ico') para obtener el archivo de favicon dentro de la carpeta public.
- Que string tengo que poner dentro de assets para obtener la imagen de mobile del cybermonday?
- Cual sería la ruta absoluta a esa imagen?
Cuando entro al navegador a ver mi app (a http://localhost:8080, que se carga en public/index.html) veo todo bien, sin embargo cuando voy a http://localhost:8080/ayuda/faq.html no se me cargan los estilos pero si el script, este es el código.
<link rel="stylesheet" src="css/estilos.css" />
<script src="/js/output.js"></script>
- ¿Por qué pasa esto?
En index.html tengo estos links:
<a href="/">Home</a>
<a href="/ayuda/faq.html">FAQ</a>
<a href="/ayuda/contactanos.html">Contactanos</a>
- ¿Cual o cuales de los siguientes href de Home serian los correctos para que se vuelva a cargar index.html.
<a href="">Home</a><a href=".">Home</a><a href="index.html">Home</a><a href="/index.html">Home</a><a href="http://localhost:8080/">Home</a><a href="http://localhost:8080/index.html">Home</a>
Ahora cuando estoy en http://localhost:8080/ayuda/faq los links son estos:
<a href="../../">Home</a>
<a href="faq.html">FAQ</a>
<a href="contactanos.html">Contactanos</a>
- ¿Son correctos?
- ¿Funcionan los links si copio los de index.html?