¡Acostúmbrate a escribir juntos! Este es el cuarto día de mi participación en el "Nuevo plan diario de los Nuggets·Desafío de actualización de abril", haz clic para ver los detalles del evento .

Patrón de enrutador Vue

tema

Vue 'hash' | 'history' | 'MemoryHistory（abstract）'-

Actualizar a v4

Después de la actualización de Vue-router v4, se mode: 'xxx'reemplaza con la forma de API, pero la función es la misma

mode: 'hash'reemplazar concreateWebHashHistory()
mode: 'history'reemplazar concreateWebHistory()
mode: 'abstract'reemplazar concreateMemoryHistory()

PD: Personalmente, memoryllamar es abstractmás fácil de entender que llamar, el primero es como su nombre indica, y el segundo es demasiado abstracto.

import { createRouter, createMemoryHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

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

export default router

复制代码

picadillo

// http://127.0.0.1:8881/hash.html?a=100&b=20#/aaa/bbb
location.protocol // 'http:'
location.hostname // '127.0.0.1'
location.host // '127.0.0.1:8881'
location.port // '8881'
location.pathname // '/hash.html'
location.search // '?a=100&b=20'
location.hash // '#/aaa/bbb'
复制代码

Características del hachís

Activará un salto de página, puede usar "atrás" y "adelante" del navegador
Pero no actualizará la página, admitirá las funciones necesarias de SPA
El hash no se enviará al servidor (por lo que actualizar la página también llegará a la página actual, lo que permitirá que la interfaz procese la ruta de acuerdo con el hash)

El hash en la url no se enviará al servidor. La parte delantera onhashchangelo recibe y lo maneja por sí mismo.

// 页面初次加载，获取 hash
document.addEventListener('DOMContentLoaded', () => {
    console.log('hash', location.hash)
})
// hash 变化，包括：
// a. JS 修改 url
// b. 手动修改 url 的 hash
// c. 浏览器前进、后退
window.onhashchange = (event) => {
    console.log('old url', event.oldURL)
    console.log('new url', event.newURL)

    console.log('hash', location.hash)
}
复制代码

API de historial H5

Dos API de uso común

history.pushState
window.onpopstate

Cuando se actualiza la página, el servidor debe realizar el procesamiento ; consulte la documentación . . Es decir, no importa qué URL acceda al servidor, la página debe devolverse.

De acuerdo con la especificación de URL, diferentes URL corresponden a diferentes recursos, por ejemplo:

https://github.com/servidor Volver a la página de inicio
https://github.com/username/servidor devuelve la página de usuario
https://github.com/username/project1/servidor volver a la página del proyecto

Pero usar el enrutamiento de front-end de SPA cambia esta regla, si github lo usa:

https://github.com/servidor Volver a la página de inicio
https://github.com/username/El servidor vuelve a la página de inicio y el enrutamiento frontal salta a la página del usuario.
https://github.com/username/project1/El servidor vuelve a la página de inicio y el enrutamiento frontal salta a la página del proyecto.

Por lo tanto, desde el punto de vista de implementación del desarrollador, el enrutamiento frontal es una forma de violación de las reglas. Pero los usuarios que no se preocupan por el back-end y solo se preocupan por las páginas frontales o los navegadores, prefieren pushStateeste enfoque.

La diferencia entre los tres modos.

hash: use cambios de hash de URL para registrar direcciones de enrutamiento
history: use la API de historial H5 para cambiar la dirección de enrutamiento del registro de URL
resumen: no modifique la URL, la dirección de enrutamiento está en la memoria, pero la actualización de la página volverá a la página de inicio .

Pregunta en serie: ¿Cuántos modos tiene el enrutador de reacción?

react-router tiene tres modos, el diseño es el mismo que vue-router

Profundidad de front-end: la diferencia entre hash | historia | resumen en modo Vue-router