Introducción y Setup de Vue Router

Compañeros, si están usando la versión 3 de Vue deben descargar este paquete de ‘vue-router’:
$ npm i vue-router@next
> Ya que si instalan ‘$ npm i vue-router’ no les va a funcionar en esta versión de Vue <

Ahora bien, si ya lo instalaron, no se preocupen, remuévanlo con este comando:
$ npm remove vue-router
E instalen el que les comento más arriba.

> Ya luego de haber instalado ‘vue-router’ para la versión 3 de Vue deben de hacer algunos cambios en el código para que puedan tener los mismos resultados que se muestran en esta clase.
Partamos viendo primero como queda el archivo
- main.js -

> Si se fijan, es aquí donde estamos usando nuestra función ‘.use()’ y es de esta forma cómo le decimos a Vue que utilice el ‘router’ que importamos en la línea 6.

Ahora que ya tenemos este archivo listo, debemos modificar nuestro archivo
- router.js -

> Aquí estamos haciendo uso de 2 métodos de ‘vue-router’:

1. ‘createWebHistory’: Lo usamos para el historial de navegación
2. ‘createRouter’: Lo usamos para crear nuestra instancia de router, y es dentro de este donde construimos nuestro Array de rutas, siendo cada ruta representada a través de un objeto.

Ahora bien, además del uso de esos métodos, hay un par de cosas más que se hacen diferente.
Estas son:

1. Ya no hacemos uso de la función ‘use()’ ya que esta la estamos usando directamente en la instancia de nuestra aplicación de Vue en ‘main.js’, y por lo mismo ya no necesitamos escribir tampoco 'import Vue from ‘vue’

2. Y el otro cambio es que ahora para que podamos dirigir todas las rutas que no existen a un componente destinado para eso, que en nuestro caso es el componente ‘Error.vue’, debemos definir el 'path’ de esa ruta de esta forma:

path: "/:catchAll(.*)", 

ya que si lo hacen así:

path: "*",

No les va a funcionar.

-------------------------------
> Los componentes que se crearon en la clase que están dentro del directorio ‘views’ son iguales, por eso no es necesario ponerlos en este comentario <
-------------------------------

Y bueno, ya con estas modificaciones no deberían tener problemas al correr su aplicación 😄.
Espero les sirva, Saludos!

Se puede apreciar que al escribir manualmente la dirección en la barra, la pagina se recarga, sin embargo, al hacer clic al enlace generado por el router-link, la pagina no recarga. Esa en la idea de usar router-view y router-link

el video esta mal editado, en que momento se crearon los archivos Error.vue y About.vue?

Para los que están trabajando con Vue.js 2. El codigo para instalar la version del vue-router compatible.

npm i vue-router@3.5.3

La forma de usar Vue Router cambió un poquito mucho en VueJS 3

Les recomiendo usar el comando:

vue add router

Y se ahorran todo el trabajo, aunque les quedará una estructura diferente y a esta altura del proyecto les sobreescribirá muchas cosas, así que para simplificarlo mas, el archivo router.js quedaría así:

import { createRouter, createWebHistory } from "vue-router";

import Home from "@/views/Home.vue";

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    }
  ]

});

export default router;

Y el archivo main.js así:

import { createApp } from "vue";
import App from "./App.vue";

//El @ representa al directorio src
import "@/assets/css/tailwind.css";

import router from "@/router.js";

createApp(App)
  .use(router)
  .mount("#app");

Como cuando crees que el Profesor es un robot por como lee el guion jajaj

Añadir documentación de Vue Router: https://router.vuejs.org/

Holaa, tengo una duda, lo que pasa es que para instalar Vue Router lo hice desde la UI, entonces me reemplazo y me creó unos archivos, y veo que me da esta ruta así, pero no entiendo el porque y para que sirve, ya que no veo que cambie en algo en el navegador. Solo es una duda 😃

Hola, ¿para qué se usa exactamente el 'mode: ‘history’? Veo que normalmente recomiendan quitarlo porque hace conflicto de algún modo al realizar la build con npm del proyecto. ¿Es necesario ponerlo?

Si tienen inconvenientes les recomiendo bastante leer los comentarios, siempre hay personas que se toman el tiempo necesario para tratar de aclarar los errores que se pueden llegar a presentar al momento de ir codeando o trabajando con la consola 👍

Vue 3, sintaxis del error

{ 
        path: "/:catchAll(.*)",
        name: "error",
        component: Error
     }
<code> 

Espero les sirva

Instalar Vue Router con npm es muy sencillo, simplemente ejecutamos el siguiente comando:

npm i -S vue-router

El Router de Vue me ha parecido muy diferente al de React 😕 . Pero bueno, es algo lógico ya que cada uno tiene sus pro y sus contras. Como recomendación para muchos, trabajen este curso en Vue 2 y cuando lo terminen pásenlo a Vue 3 . Este curso es su primer acercamiento al framework, y más de uno se puede sentir muy frustrado por los errores debido a los cambios de una versión a otra. Por otra parte, les recomiendo utilizar yarn como su gestos de paquetes y dependencias, es más fluido que npm.
#NuncasParesDeAprender

yarn add vue-router ```

Vue.use(‘xxx’) permite instalar o incorporar plugins o utilidades que tenga la librería.

<router-view /> componente que permite establecer cual es el código de html que se reemplazará a medida que se vaya cambiando la ruta.

v-router ofrece un componente llamado
<router-link> que sirve para direccionar de una pagina a otra, necesita la propiedad to para dirigir

Si les salen errores al momento de hacer npm run serve puede deberse a la diferencia en la version del router. Recordemos que este curso se hizo con vue js 2 y ya estamos en la 3. Al instalar vue-router como lo hizo en el video, se esta instalando la versión mas actual.

Para usar la misma versión que Nacho solo deben correr:

npm npm remove vue-router

y luego

 npm i vue-router@3.5.3

Para los que tengan problema con el router, ya que estan trabajando con Vue 3.
Esta es la solucion.

Router.js

import { createWebHistory, createRouter} from 'vue-router'
import Home from '@/views/Home.vue'


const routes= [
    { 
        path: '/',
        name: "Home",
        component: Home
     },
 ];

const router = createRouter({
      history: createWebHistory(),
      routes,
    
})

export default router;
<code> 

Main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---
import './assets/css/tailwind.css'

createApp(App).use(router).mount('#app')

<code> 

Espero les sirva.

Si estas usando Vue 3, necesitas otro codigo para el Router.

Primero desinstala el router de Vue 2 y limpia cache:

npm uninstall vue-router --save
npm cache clean --force

Ahora instala el router de Vue 3:

npm i vue-router@next

Archivo main.js hasta este video:

import { createApp } from "vue";
import App from "./App.vue";
import "@/assets/css/tailwind.css";

import router from "@/router.js";

createApp(App)
  .use(router)
  .mount("#app");

Archivo router.js hasta este video:

import { createWebHistory, createRouter } from "vue-router";

import Home from "@/views/Home";

const routerHistory = createWebHistory();

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
  ],
});

export default router;

Lee el codigo y entenderas los cambios desde Vue 2 a Vue 3 ;D

Hola, a alguien le aparece este error?

router.js?41cb:4 Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (router.js?41cb:4)
    at Module../src/router.js (app.js:1291)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:14)
    at Module../src/main.js (app.js:1279)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1340)
    at __webpack_require__ (app.js:849)

No he podido avanzar desde allí

Y mi archivo router.js está asi:

import Vue from "vue";
import Router from "vue-router";
import Home from "@/views/Home";
Vue.use(Router);

export default new Router({
  mode: "history",

  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
  ],
});```

Necesito ayuda en esta parte, para incluir ‘router’ en main.js, no se genera las mismas lineas que salen en el video, solo este archivo es diferente, por favor alguien que le haya generado lo mismo, como serian las lineas con router please 😢 quiero seguir avanzando con mis clases, este es mi codigo generado:

1.install Vue route ->npm i -S vue-router
2.create a new file “router.js”
3.import vue, vue-router, Home from ‘@/views/Home ->still doesn’t create’
4. router objects with data like path, name, component
5. crear vistas home, about y error
6. para que funcione el router tenemos que ir a main. js y import router from “@/router”
7. en main.js dentro de new Vue -> router
8. en App.vue llamar a <router-view/>
9. para regresar <router-link to=”/” />->to es para decir a donde va ha regresar

Como puedo hacer para prettier no me ponga punto y como (😉 al final de cada linea y una coma (,) al final de una linea que no sea necesaria

Hola a todos, al incluir los componentes error y about me sale este error:

Compiled with problems:X

ERROR in ./src/router.js 5:0-33

Module not found: Error: Can’t resolve ‘@/view/About’ in ‘/opt/lampp/htdocs/platzi-exchange/src’

ERROR

/opt/lampp/htdocs/platzi-exchange/src/views/Error.vue
1:1 error Component name “Error” should always be multi-word vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

Me podrían ayudar por favor…Muchisimas gracias

Para el componente de About.vue pueden usar este codigo:

<template>
  <div class="flex-col items-center">
    <h1 class="text-gray-700 text-6xl">Platzi Exchange v1.0.0</h1>
    <p class="text-gray-600 text-xl text-center">
      Un proyectaso para obtener data de ciertas cryptos
      <br />
      El proyecto pertenece al curso de Vue
    </p>
  </div>
</template> 

después de leer varios comentarios de mis compañeros, revise la documentación y como estamos usando vue cli, solo escribimos vue add router y listo. saludos

Esto es maravilloso, siempre usaba las rutas y links por defecto que se podían usar en el html y cuando las aplicaba en mis paginas quedaba algo como https://hola/#error. Siempre me pregunte como diablos se hacia esto. La mejor clase. ❤️

Tuve algunos problemas con la versión de vue-router que se estaba instalando por defecto, me ayudo mucho usar la versión específica del video npm i [email protected]

Tuve algunos errores configurando mi Vue-router, despues de leer un poco de documentación vi que se importa de la siguiente manera

import VueRouter from "vue-router";

Vue.use(VueRouter);
export default new VueRouter({ .... });

en algunas partes lei que en routes se llamaba “components” en lugar de “component” pero poner “component” no me genero ningun problema.

Hola para los que usen version 3+ de Vue aqui un articulo
https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
y video https://www.youtube.com/watch?v=I7pRp1Bwysw
que hablan de como hacer el ruteo.
A mi me funciono.

Para quien le sirva y entienda que no lo tradusca a todos los demas en codigo.

pues si no se quieres complicar para poder continuar con este curso te sugiero usar la version 2 Vue como los compañeros antes á mi lo recomendaron.

ok, me suena que **router.js**es el equivamente del global.asax en asp.net 🤔

    <router-view class="container px-5 sm:px-20 py-20 flex justify-center"/>

Me gustaria saber como puedo resolver este problema.

![](

Para proyectos de vue en su versión 2, estando en la carpeta raiz de nuestro proyecto, escribimos en la consola $ npm i vue-router@next --force yo hice esto, porque no me dejaba instalarlo.

import { createApp } from “vue”;
import App from “./App.vue”;
import “@/assets/css/tailwind.css”;

import “@/router”;

createApp(App).mount("#app");```

¿Cómo puedo hacer para pasarle el router se me va a explotar el celebro quien me ayuda
?

Para los que quieran usar vue 2 y seguir el curso tal cual, ejecuten npm install vue-router@2 para instalar vue router 2

https://v2.vuejs.org/v2/guide/migration-vue-router.html

Primer curso en Platzi donde el Profe responde preguntas e incluso otros profes, y además que pedazo de profe

Es excelente este curso. Recién estoy aprendiendo Vue y me es interesante todo lo que es el mundo de JS. El profesor muy acertado con sus explicaciones, excelente.

En Vue3 hay que tener ciertas consideraciones por ejemplo el enrutamiento se ha modificado un ejemplo del nuevo enrutamiento es

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
let history = createWebHistory();
const router = createRouter({
  history,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    }
  ]
});
export default router;

Para poder utilizarlo en el archivo main.js ahora se ocupa la sintaxis

createApp(App)
  .use(router)
  .mount("#app");

agregando en el use el parametro route

De igual manera para la url no identificadas puede que el * les mande un error por lo cual les recomiendo utilizar

path: "/:catchAll(.*)",

en ves de

path: "*",```

para los que estan trabajando en vue2 instalen la version del video

npm i vue-router@3.1.3

Para los que tienen la configuración similar

“dependencies”: {
“core-js”: “^3.6.5”,
“tailwindcss”: “^1.1.2”,
“vue”: “^2.6.11”,
},

npm install vue-router@3

29.-Introducción y Setup de Vue Router

Single Page Application: son una sola página con un solo index.html el cual se va reemplazando dinámicamente a medida que nosotros vayamos cambiando la URL.

Solo se cambia una porción de código dentro de nuestro proyecto, esto se hace de manera dinámica usando vue router.

Dentro de router.js vamos a definir las rutas que van a corresponderse con los diferentes componentes, es decir, cada vez que accedamos a una ruta vamos a mostrar un componente, y cuando cambiemos de ruta se cambiara el componente.

Vue.use() —> Es una función que nos permite instalar plugins o incorporar los distintos plugins o utilidades que tienen las librerías. Es la que nos permite ir escalando, progresando a medida que lo necesitemos.

<router-view> —> Lo usamos para establecer cual es el código o el pedazo de HTML que se va a reemplazar a medida que se vaya cambiando la ruta.

<router-link> —> nos deja agregar un link para ir de un página a otra.

si a alguien no le funciona o no le detecta la extensión de vue para Chrome recomiendo instalar la versión beta
link de descarga

Si tu **versión de vue es la 3, **
deberás agregar .use(store) y te debera quedar de la siguiente manera,

import Routes from "@/router/index.js"
createApp(App).use(Routes ).mount("#app");

Tenia la versión 2 de Vue para el proyecto, sin embargo no me renderizaba la tabla al hacer el router…Pase a la version 3 de vue y realice las configuraciones que vi en los comentarios respecto al main.js y router.js…Pero sigue sin enlazar la ruta y me sale este error en la consola del navegador:

[Vue Router warn]: No match found for location with path "/Home"

Me emocioné en la parte que saltó el error, ya quiero debuggear todo el día en Vue 😄

De que forma puedo integrar vue.js y vuetify con php?.. hice un CRUD con los cdn pero no me parece porque se vuelve pesado

Funciona bien todo mientras estoy en el localhost:8080, pero al ejecutar el build, en el resultante no está tomando las rutas si las ingreso directamente.

Por ejemplo, definí rutas “/login” y “/about” pero una vez generado el build, al escribir manualmente las rutas “dominio/login” o “dominio/about” me da not found. Hay algo más que hacer para que una ruta directa la asigne a un componente o una vista?

como haces para poner un rgba, color con opacidad, en tailwind?

SINGLE PAGE APLICATION

- El ejercicio se esta generando en base a una sola página HTML,
- VUE ROUTER Es una herramienta oficial para hacer este tipo de cambios
- <router-view\>   Es la etiquieta que nos proporciona el router para decirle en donde se incrustara el codigo que cambie
- <router-link\>   Nos redirecciona una ruta ya generada
- path: "*"        Nos redirecciona cuando ponen una ruta que no existe

no me renderiza la tabla :C

Vue Router es un Plugin muy necesario para desarrollar una Single Page Application.

Los que Tienen Vue 3 aqui les dejo la solucion del Vue-router

Como algunos se han dado cuenta, al utilizar Vue 3 se requieren hacer algunos cambios. El principal es instalar el paquete npm i vue-router@next , ya que es el nuevo paquete que soporta los cambios de esta version, el código debería quedar así.

Main.js

import { createApp } from "vue";
import App from "./App.vue";
import "@/assets/css/tailwind.css";
import router from "@/router.js";

createApp(App)
  .use(router)
  .mount("#app");

Router.js

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from '@/views/About.vue';
import Error from '@/views/Error.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
      {
        path: '/about',
        name: 'about',
        component: About,
      },
      {
        path: '/:catchAll(.*)',
        name: 'Error',
        component: Error,
      } 
  ]
});

export default router;

En mi caso no he logrado hacer funcionar el tema de los routers con ninguna de las soluciones aquí propuestas y vue3.
En mi caso he desinstalado vue3, he instalado vue2 y todo ok. En el fondo, dado que el curso se centra en vue2, quizás sea la mejor opción.

Hola saludos , a los que le esta dando problema al cargar la tabla es debido a un error del video en la vista “Home” “component” no funciona , no se que funcion cumple aun , seria (“Components”) le anexo un pedazo de codigo como deberia la vista “Home”

Hola veo que muchos aportes están dirigidos para Vue3, si usas Vue 2, no te preocupes, el código y la clase está funciona hasta hoy; abril del 2021. Si llegas a presentar problemas, revisa tu código, todo en la clase funciona.

Dejo el código de los templates para About.vue y Error.vue como aporte, cabe aclarar que no todas sus clases funcionan:

About.vue

<template>
    <div class="flex-col items-center">
        <h1 class="text-gray-700 text-6xl text-center">Platzi Exchange v1.0.0</h1>
        <p class="text-gray-600 text-xl text-center">
            Proyecto para obtener las cotizaciones de las cryptomonedas más importantes, a traves de la API rest de Coincap.
            <br>Este proyecto es utilziado en el curso de Vue.js Básico de Platzi.
        </p>

        <br>

        <router-link to="/" class="mt-5 text-xl text-green-600 hover:underline">
            Volver a la página de inicio
        </router-link>   
    </div>
</template>

Error.vue

<template>
    <div class="flex-col items-center">
        <h1 class="text-gray-700 text-6xl uppercase">Error</h1>

        <router-link to="/" class="mt-5 text-xl text-green-600 hover:underline">
            Volver a la página de inicio
        </router-link>
    </div>
</template> 

Una Single Page Aplication (SPA) es una aplicación que tiene una sola página, es decir, solo existe un index.html que se va a ir modificando como vaya cambiando la url. Solo una porción de la página cambia, que es donde va el contenido. Vue Router es una librería de Vue hecha para hacer esto.

Dentro del archivo router.js se hace una asignación de qué componente se va a mostrar con la ruta que le corresponde.

La etiqueta router-view debe donde van a estar apareciendo los diferentes componentes dependiendo de la URL.

Compañeros, les dejo la documentación oficial de vue3.js del vue Router https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/

Muy interesante, tengo que admitir que el comportamiento del router es muy similar como en angular (configuración)

Me gusta cuando el profesor dice por ejemplo: “Puedes llamar al archivo router.js ó route.js o como quieras” es decir, durante su discurso se toma el tiempo para diferenciar qué cosas se deben hacer literal para que funcione y qué cosas quedan a criterio de cada quien, ó si es una buena práctica hacerlo de cierta manera, etc. No muchos lo hacen, así que mis felicitaciones a @Nacho Anaya.

👌

Yo tengo este error y no sé como solucionarlo
TypeError: Cannot read property ‘use’ of undefined

y en mi código lo tengo así

import Vue from ‘vue’

Vue.use(Router)
export default new Router({…

Para establecer la ruta de error en Vue 3, se realiza de la siguiente manera:

{
        path: "/:catchAll(.*)",
        name: "Error",
        component: Error,
},```

Podemos utilizar desde el script una manera programática para las rutas…

<template>
	<span @click="handleClick">Click me!!!</span>
</template>

<script>
...
export default {
    methods:{
   	handleClick(){
		this.$router.push({name: 'RouteName', params{....}})
	} 
   }
}
</script>

eso es lo mismo a utilizar el router-link

El curso es muy bueno Nacho, el unico pero, es el contraste de tu vscode ese azul con las letras rosadas y amarillas es lo unico q no me cuadra
.