Anidamiento de enrutamiento, encapsulación y uso de componentes en vue

Uno: el anidamiento del enrutamiento

El enrutamiento es el núcleo de vue.

Use npm install --save vue-router para usar.

--save vue-router puede escribir las dependencias correspondientes en package.json

Importe vue-router en index.js en la carpeta del enrutador y declare que desea usar vue-router;

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

Importe el componente del enrutador en el archivo main.js y luego monte la ruta en el proyecto VUE

Luego descargue el enrutamiento de la página en el archivo index.js en la carpeta del enrutador, como el enrutamiento de inicio de sesión, la lista de usuarios, etc.

Puede utilizar el enrutamiento en la página de las siguientes formas

1: a través de la etiqueta de enlace del enrutador

<router-link to = "home"> Inicio </router-link>

2: a través del método push del enrutador

self. $ router.push ({ruta: '/ administrar'});

Dos: encapsulación y uso de componentes

Cree una nueva página headTop bajo el archivo de componentes

Luego introduzca el componente en la página de inicio.

1: introducir componentes

import headTop from '../../components/headTop'

2: declarar el componente

components:{
  headTop
}

3: Utilice componentes

<head-top></head-top>

El efecto de la página de inicio de vue es el siguiente: