A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Introducci贸n y Setup de Vue Router

29/38
Recursos

Aportes 63

Preguntas 17

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Compa帽eros, si est谩n usando la versi贸n 3 de Vue deben descargar este paquete de 鈥榲ue-router鈥:
$ npm i [email protected]
> 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 鈥榲ue-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 鈥榬outer鈥 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 鈥榲ue-router鈥:

  1. 鈥榗reateWebHistory鈥: Lo usamos para el historial de navegaci贸n
  2. 鈥榗reateRouter鈥: 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 鈥榰se()鈥 ya que esta la estamos usando directamente en la instancia de nuestra aplicaci贸n de Vue en 鈥榤ain.js鈥, y por lo mismo ya no necesitamos escribir tampoco 'import Vue from 鈥榲ue鈥

  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 鈥楨rror.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 鈥榲iews鈥 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 [email protected]3.5.3

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

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");

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 馃槂

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 馃憤

A帽adir documentaci贸n de Vue Router: https://router.vuejs.org/

Hola, 驴para qu茅 se usa exactamente el 'mode: 鈥榟istory鈥? Veo que normalmente recomiendan quitarlo porque hace conflicto de alg煤n modo al realizar la build con npm del proyecto. 驴Es necesario ponerlo?

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(鈥榵xx鈥) 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

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.

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 鈥榬outer鈥 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 鈥渞outer.js鈥
3.import vue, vue-router, Home from 鈥楡/views/Home ->still doesn鈥檛 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

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 [email protected]3.5.3

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 鈥渃omponents鈥 en lugar de 鈥渃omponent鈥 pero poner 鈥渃omponent鈥 no me genero ningun problema.

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 [email protected]

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 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 馃

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 [email protected] --force yo hice esto, porque no me dejaba instalarlo.

import { createApp } from 鈥渧ue鈥;
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 [email protected] 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 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> 

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

npm i [email protected]3.1.3

Para los que tienen la configuraci贸n similar

鈥渄ependencies鈥: {
鈥渃ore-js鈥: 鈥淾3.6.5鈥,
鈥渢ailwindcss鈥: 鈥淾1.1.2鈥,
鈥渧ue鈥: 鈥淾2.6.11鈥,
},

npm install [email protected]

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鈥ase a la version 3 de vue y realice las configuraciones que vi en los comentarios respecto al main.js y router.js鈥ero 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 鈥渄ominio/login鈥 o 鈥渄ominio/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

Hola saludos , a los que le esta dando problema al cargar la tabla es debido a un error del video en la vista 鈥淗ome鈥 鈥渃omponent鈥 no funciona , no se que funcion cumple aun , seria (鈥淐omponents鈥) le anexo un pedazo de codigo como deberia la vista 鈥淗ome鈥

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.

Como algunos se han dado cuenta, al utilizar Vue 3 se requieren hacer algunos cambios. El principal es instalar el paquete npm i [email protected] , 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;

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: 鈥淧uedes 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 鈥榰se鈥 of undefined

y en mi c贸digo lo tengo as铆

import Vue from 鈥榲ue鈥

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
.