Vue Router Config - Tylung/vue-apuntes GitHub Wiki

Configuración del Vue Router

  1. Se descarga el paquete de vue-router

npm

npm install vue-router@4

yarn

yarn add vue-router@4
  1. Se definen las rutas de mi app

Archivo: src/router/router.js

import { createRouter, createWebHashHistory } from 'vue-router';

import AboutPage from '@/modules/pokemon/pages/AboutPage';
import ListPage from '@/modules/pokemon/pages/ListPage';
import PokemonPage from '@/modules/pokemon/pages/PokemonPage';
// Son las paginas que vamos a usar para las rutas

const routes = [
    { path: '/', component: ListPage },
    { path: '/about', component: AboutPage },
    { path: '/id', component: PokemonPage },
  ]

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


export default router

La raiz / de la aplicación es la pagina inicial, si se dirige al /about ira a la pagina AboutPage

La constante router cera la instancia de router que recibe el arreglo de las rutas y el tipo de historial, que estos son importados del paquete de router

import { createRouter, createWebHashHistory } from 'vue-router';

Y para que todo esto funcione se tiene que usar en la app e usar el routerview en el App.vue

Archivo: src/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
import router from './router/router';

createApp(App)
    .use( router )
    .mount('#app')
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <router-view />
</template>

<script>
export default {
  name: 'App',
  components: {}
}
</script>
⚠️ **GitHub.com Fallback** ⚠️