VueJS - Enrutamiento

VueJS no tiene una función de enrutador incorporada. Necesitamos seguir algunos pasos adicionales para instalarlo.

Descarga directa desde CDN

La última versión de vue-router está disponible en https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com proporciona enlaces cdn basados en npm. El enlace anterior siempre se actualiza a la versión reciente. Podemos descargarlo y alojarlo, y usarlo con una etiqueta de script junto con vue.js de la siguiente manera:

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

Usando NPM

Ejecute el siguiente comando para instalar vue-router.

npm  install vue-router

Usando GitHub

Podemos clonar el repositorio de GitHub de la siguiente manera:

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

Comencemos con un ejemplo simple usando vue-router.js.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

Output

Para comenzar con el enrutamiento, debemos agregar el archivo vue-router.js. Toma el código dehttps://unpkg.com/vue-router/dist/vue-router.js y guárdelo en el archivo vue-router.js.

El script se agrega después de vue.js de la siguiente manera:

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

En la sección del cuerpo, hay un enlace de enrutador definido de la siguiente manera:

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 2</router-link>
</p>

<router-link>es un componente que se utiliza para navegar al contenido HTML que se mostrará al usuario. La propiedad to es el destino, es decir, el archivo de origen donde se seleccionará el contenido que se mostrará.

En el código anterior, hemos creado dos enlaces de enrutador.

Eche un vistazo a la sección de secuencias de comandos donde se inicializa el enrutador. Hay dos constantes creadas de la siguiente manera:

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

Tienen plantillas, que deben mostrarse cuando se hace clic en el enlace del enrutador.

A continuación, está la const de rutas, que define la ruta que se mostrará en la URL.

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

Las rutas definen la ruta y el componente. El camino es decir/route1 se mostrará en la URL cuando el usuario haga clic en el enlace del enrutador.

El componente toma los nombres de las plantillas que se mostrarán. La ruta de las rutas debe coincidir con el enlace del enrutador a la propiedad.

Por ejemplo, <router-link to = ”path here”> </router-link>

A continuación, la instancia se crea en VueRouter utilizando el siguiente código.

const router = new VueRouter({
   routes // short for `routes: routes`
});

El constructor de VueRouter toma las rutas como parámetro. El objeto de enrutador se asigna a la instancia principal de vue mediante el siguiente código.

var vm = new Vue({
   el: '#app',
   router
});

Ejecute el ejemplo y vea la pantalla en el navegador. Al inspeccionar y verificar el enlace del enrutador, encontraremos que agrega clase al elemento activo como se muestra en la siguiente captura de pantalla.

La clase agregada es class = “router-link-exact-active router-link-active”. El enlace activo obtiene la clase como se muestra en la captura de pantalla anterior. Otra cosa a tener en cuenta es que el <router-link> se representa como una etiqueta.

Accesorios para el enlace de enrutador

Veamos algunas propiedades más para pasar a <router-link>.

a

Esta es la ruta de destino dada al <router-link>. Al hacer clic, el valor de to se pasará a router.push () internamente. El valor debe ser una cadena o un objeto de ubicación. Cuando usamos un objeto, necesitamos vincularlo como se muestra en, por ejemplo, 2.

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

A continuación se muestra la salida de, por ejemplo, 3.

En la ruta de la URL, name = Tery es parte de la cadena de consulta. Por ejemplo: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery

reemplazar

Agregar reemplazo al enlace del enrutador llamará al router.replace() en vez de router.push(). Con reemplazar, el historial de navegación no se almacena.

Example

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

adjuntar

Agregar agregar al <router-link> <router-link> hará que la ruta sea relativa.

Si queremos pasar del enlace del enrutador con ruta / ruta1 a la ruta de enlace del enrutador / ruta2, mostrará la ruta en el navegador como / ruta1 / ruta2.

Example

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

etiqueta

En la actualidad, <router-link> se representa como una etiqueta. En caso de que queramos representarlo como alguna otra etiqueta, necesitamos especificar lo mismo usando tag = ”nombre de etiqueta”;

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Hemos especificado la etiqueta como intervalo y esto es lo que se muestra en el navegador.

La etiqueta que se muestra ahora es una etiqueta de intervalo. Seguiremos viendo el clic mientras hacemos clic en el enlace del enrutador para navegar.

clase activa

De forma predeterminada, la clase activa agregada cuando el enlace del enrutador está activo es enrutador-enlace-activo. Podemos sobrescribir la clase configurando lo mismo que se muestra en el siguiente código.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

La clase utilizada es active_class = ”_active”. Esta es la salida que se muestra en el navegador.

clase-activa-exacta

La clase exactactive predeterminada que se aplica es router-link-exact-active. Podemos sobrescribirlo usando exact-active-class.

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Esto es lo que se muestra en el navegador.

evento

En la actualidad, el evento predeterminado para el enlace del enrutador es el evento de clic. Podemos cambiar lo mismo usando la propiedad event.

Example

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

Ahora, cuando pasamos el mouse sobre el enlace del enrutador, navegará como se muestra en el siguiente navegador. Pase el mouse sobre el enlace 1 del Enrutador y veremos cómo cambia la navegación.