El uso y la comparación del modo historial y el modo hash en vue-router

Este artículo presenta principalmente cómo vue-router implementa la configuración del modo de historial, que tiene un buen valor de referencia y espera ser útil para todos. Si hay algún error o consideraciones incompletas, por favor hágamelo saber.

configuración del modo de historial de vue-router

I. Resumen

Vue-router puede establecer dos modos:hash和history

const router = new VueRouter({
    
     
  mode: "hash", 
  // mode: "history", 
  routes 
});

Si usa el modo hash, generalmente no se requiere una configuración especial;

Pero si desea utilizar el modo de historial, debe realizar ciertas configuraciones en la parte frontal y en el lado del servidor;

Por lo general, no hay problemas con la depuración local cuando se usa el modo de historial, pero una vez que se lanza a un entorno de prueba o producción, aparecerá una pantalla blanca o una pantalla blanca cuando se actualice la página. Este problema ocurre porque la interfaz y el extremo del servidor no se han configurado en consecuencia.

2. Cómo configurar el modo historial

2.1 Configuración de front-end
Primero, configure mode和baselos dos valores de la ruta, de la siguiente manera:

const routes = [...] 
const router = new VueRouter({
    
    
  mode: "history",
  base: process.env.BASE_URL,  // 如果使用history模式，必须设置base参数
  routes
});
 
export default router;

En segundo lugar, configure vue.config.js depublicPath la siguiente manera:

module.exports = {
    
    
  // publicPath默认值是'/'，即你的应用是被部署在一个域名的根路径上
  // 设置为'./'，可以避免打包后的静态页面空白
  // 当在非本地环境时，这里以项目test-daily为例，即打包后的h5项目部署服务器的test-daily目录下
  // 那么这里就要把publicPath设置为/test-daily/，表示所有的静态资源都在/test-daily/里
  // 打包部署后，会发现index.html引用的静态资源都添加了路径/test-daily/
  publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/',  
  ...... 
}

Como se muestra en la figura a continuación:

Hasta ahora, el trabajo de configuración de front-end ha terminado.

2.2 Configuración del servidor (tome nginx como ejemplo aquí)

El sitio web oficial en realidad tiene una introducción, pero no es muy detallada. Aquí está el código directamente, de la siguiente manera:

location /test-daily indica que el proyecto se implementa en el directorio /test-daily, que debe ser coherente con el valor de publicpath en vue.config.js.

La razón por la que la página se actualiza con una pantalla en blanco es porque el recurso de enrutamiento no existe. Tome este proyecto como ejemplo (home es el parámetro del enrutamiento de la página de inicio):

https://test.xxx.yy/test-daily/home

Al acceder a la ruta anterior, de hecho, no hay ningún recurso correspondiente, por supuesto, será 404. Para evitar esta situación, puede hacer que todas las rutas apunten a index.html para resolver el problema.

Configúrelo en nginx: try_files $uri $uri/ /test-daily/index.html servirá.

Hasta ahora, se han realizado todas las configuraciones del modo historial.

modo: el papel de la "historia"

Si el modo: "historial" no está configurado, el enrutamiento de Vue está predeterminado en modo hash, que se muestra en la barra de direcciones de la siguiente manera: hash: el símbolo "

#" se muestra en la barra de direcciones (el hash aquí no es una operación hash en criptografía). Por ejemplo: localhost:8080/#/index, el valor hash es #/index. Su característica es que aunque el hash aparezca en la ruta, no se incluirá en la solicitud HTTP y no tiene ningún efecto en el backend, por lo que cambiar el hash no recargará la página.

History utiliza los nuevos métodos pushState() y replaceState() en la interfaz de historial H5. (Se requiere soporte específico del navegador) Estos dos métodos se aplican a la pila de historial del navegador. Basado en el atrás, adelante y adelante existente, proporcionan la función de modificar el historial. Es solo que cuando realizan modificaciones, aunque se cambie la URL actual, el navegador no enviará inmediatamente una solicitud al backend.

En resumen: tanto el modo hash como el modo historial pertenecen a las características propias del navegador, y Vue-Router solo usa estas dos características (llamando a la interfaz proporcionada por el navegador) para implementar el enrutamiento frontal.

Para hacer que el camino sea más intuitivo y hermoso, debe usar el modo de historial. Simplemente agregue mode: "history" a index.js en la carpeta del enrutador

Para saltos interactivos de una sola página, solo necesita usar el método proporcionado por el enrutador.

Vincule el enrutador al global en la configuración del archivo main.js

Vue.prototype.router = enrutador;
La página de salto es la siguiente:

<button @click="toArticle()">跳转文章页面</button>
methods:{
    
    
    toArticle() {
    
    
        this.$router.push('/article')
    }
  }

Lo anterior es una experiencia personal, ¡espero que pueda darle una referencia!