Estoy usando router-link para navegar por mi single page app Vue/Laravel8 :
<router-link :to="{ hash: 'about' }">About us</router-link> Desafortunadamente, este método deja un feo símbolo # en la url :
localhost:3000/#about ¿Hay alguna forma conveniente de deshacerse del # ?^
Editar:
Se sugirió usar el history mode pero este es un router link to hash . Ya tengo habilitado el history mode pero no elimina el # de la URL.
router.js :
import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../vue/home"; import About from "../vue/about"; Vue.use(VueRouter); export default new VueRouter ({ mode: "history", routes: [ {path: "/", name: "home", component: Home}, {path: "/about", name: "about", component: About}, ], scrollBehavior(to) { return { selector: to.hash, behavior: 'smooth' } } }); web.php :
<?php use Illuminate\Support\Facades\Route; Route::get('/{any}', function () { return view('welcome'); })->where('any', '.*');# significa enrutador hash, el enrutador hash no requiere API de historial HTML5, lo cual es conveniente cuando no puede redirigir cada solicitud a /index.html cuando está creando una aplicación web de una sola página.
Lo que está buscando es BrowserRouter , que requiere el uso de la API de historial de HTML5 y requiere que redirija cada solicitud a /index.html para que funcione, porque es un enrutador de cliente, no de un servidor.
const router = new VueRouter({ mode: 'history', routes: [...] }) Simplemente agregue mode: 'history' y ya está usando BrowserRouter .
Más: https://router.vuejs.org/guide/essentials/history-mode.html
En realidad, solo querrías establecer el mode en el history :
const router = new VueRouter({ mode: 'history' })Sin embargo, asegúrese de que su servidor esté configurado para manejar estos enlaces:
No. El signo hash es esencial para usar el modo hash (por eso está en el nombre). Indica el inicio del identificador de fragmento (que se utiliza para la navegación en la página).
Si no usó el hash, entonces usó el modo de historial HTML5 y navegó a una ruta diferente que debería ser manejada por el servidor.
(Aparte, es posible que desee ver esta respuesta que cubre una pregunta similar desde la dirección opuesta para React).