es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue-router: deshazte de la barra diagonal al final de la URL.

11 Jul, 2023 Programación

Configuración: Vue 2.6.14 y vue-router, mi configuración del enrutador:


{
mode: 'history',
base: document.location.pathname,
routes: [
{
path: '/',
name: 'main',
component: Main,
props: (route) => {
return {
id: route.query.id,
};
},
pathToRegexpOptions: {
strict: true,
},
},
],
}

Problema: Tengo URL como esta

local.host/page/xxx_111.html?id=111

La base del enrutador es /page/xxx_111.html. En algún momento me gustaría cambiar la URL a través de una navegación programática solo a

local.host/page/xxx_111.html

en otras palabras, deshacerme de los parámetros de consulta, pero haga lo que haga, siempre obtengo

local.host/page/xxx_111.html/

con una barra inclinada al final 🙁 ¿Cómo puedo solucionar esto?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para resolver este problema, necesitas agregar replaceState a tu navegación programática para eliminar el parámetro de consulta y la barra diagonal de la URL.

    Aquí tienes un ejemplo de cómo hacerlo:

    this.$router.replace({ path: '/page/xxx_111.html', params: {}, query: {} }, () => {}, { replaceState: true });

    En el ejemplo anterior, estamos llamando al método replace en el enrutador, proporcionando un objeto con la nueva ruta a la que queremos navegar, un objeto params y un objeto query vacíos, y una función de devolución de llamada.

    La clave aquí es pasar { replaceState: true } como tercer argumento al método replace. Esto le indica al enrutador que reemplace el estado actual del historial del navegador con el nuevo, eliminando efectivamente la barra diagonal que se agregó al final de la URL.

    Con este cambio, tu URL ahora debería ser local.host/page/xxx_111.html sin una barra diagonal al final.

Comments are closed.