Enrutamiento en Nuxt.js

En este artículo, vamos a aprender cómo funciona el enrutamiento en NuxtJs. Nuxt.js es un marco de aplicación web gratuito y de código abierto basado en Vue.js, Node.js, Webpack y Babel.js. Nuxt está inspirado en Next.js, que es un marco de un propósito similar, basado en React.js.

Crear aplicación NuxtJS:

Paso 1: puede crear un nuevo proyecto Nuxt.js usando el siguiente comando:

npx create-nuxt-app gfg

Paso 2: Ahora navegue a su aplicación usando el siguiente comando:

cd gfg

Estructura del proyecto: Se verá así.

Enrutamiento: en marcos como Nuxt.js, Next.Jj y React.js, generalmente tenemos más de una página. Entonces necesitamos un enrutador para navegar entre diferentes páginas de la aplicación. El proceso de agregar un enrutador en la aplicación para navegar entre páginas se llama enrutamiento.

Rutas automáticas: en otras aplicaciones de Vue, tenemos que crear y agregar manualmente diferentes rutas en el archivo de configuración del enrutador. Pero en Nuxt.js, no tiene que crear manualmente un archivo de configuración del enrutador. Crea automáticamente la configuración de vue-router y agrega todas las rutas de la aplicación al archivo. Cada vez que cree una nueva página, la ruta de esa se agregará automáticamente al archivo de configuración.

Ejemplo: Vamos a crear una nueva página llamada ‘gfg.vue’ con el siguiente contenido:

<template>
    <div>
    <h3>This is the GFG Page.</h3> 
    </div>
</template>

<template>
    <div>
    <h3>This is the Home Page.</h3> 
    </div>
</template>

Inicie la aplicación: use el siguiente comando para iniciar la aplicación.

npm run dev

Producción:

Navegación: Podemos agregar navegación en la aplicación Nuxt.js usando el componente NuxtLink. No necesita importar este componente en su archivo.

Ejemplo: cambiemos el contenido de ‘gfg.vue’ con el siguiente contenido:

<template>
    <div>
    <h3>This is the GFG Page.</h3> 
    <NuxtLink to="/">
        Go to HomePage
    </NuxtLink>
    </div>
</template>

<template>
    <div>
    <h3>This is the Home Page.</h3> 
    <NuxtLink to="/gfg">
        Go to GFG Page
    </NuxtLink>
    </div>
</template>

Inicie la aplicación: use el siguiente comando para iniciar la aplicación.

npm run dev

Producción:

Referencia: https://nuxtjs.org/docs/get-started/routing