Vue-router: deshazte de la barra diagonal al final de la URL.
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?
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:
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 objetoparams
y un objetoquery
vacíos, y una función de devolución de llamada.La clave aquí es pasar
{ replaceState: true }
como tercer argumento al métodoreplace
. 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.