Enrutamiento de configuración de Vue3 (vue-router)

---

prefacio

Inmediatamente después del artículo anterior, la configuración de vue3 es diferente a la de vue2. Este artículo describe cómo configurarlo. Si este artículo es útil para usted, apoye al blogger tres veces.

---

下面案例可供参考

1. Configurar el enrutamiento (vue-router)

1. Instalar enrutamiento

Use el comando npm para instalar: npm install vue-router@4
después de completar, abrimos package.jsonel archivo :
lo siguiente es exitoso

2. Crea una nueva página

Cree un directorio de vista aquí, luego cree AboutView.vue HomeView.vue dos

y luego escriba algo de contenido en los dos archivos

---

3. Cree un archivo de configuración de enrutamiento

Cree un nuevo directorio del enrutador y luego cree los archivos index.js y route.js en el directorio del enrutador.

El contenido del archivo index.js es el siguiente:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

---

Configure el enrutamiento en main.js:

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

//注意use要在mount之前
createApp(App).use(router).mount('#app')

Agregar vista de enrutador y enlace de enrutador:
lo agrego en el archivo App.vue para demostración, los lectores pueden agregarlo según su propia situación

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

---

4. ¡Informe de errores especiales!

El peor error informado por vue: Newline required at end of file but not found eol-last

Solución: Verifique si hay una línea en blanco después de la última línea del archivo index.js en el archivo del enrutador.Si no es así, debe agregar una.

Si se informa un error: error and 0 warnings potentially fixable with the --fix option.
debido a que Eslint es muy estricto en la detección de sintaxis, también informará errores si hay problemas con la sangría y los espacios. Podemos desactivarlo en vue.config.js y agregar esta línea de código: lintOnSave: falso, luego ejecute de nuevo.

---