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?