I am using router-link to navigate over my Vue/Laravel8 single page app:
<router-link :to="{ hash: 'about' }">About us</router-link>
This method unfortunately leaves an ugly # symbol in the url:
localhost:3000/#about
Is ther any conventient way to get rid of the #?^
Edit:
It was suggested to use history mode but this is a router link to hash. I have history mode enabled already but it doesn't remove the # from the 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', '.*');
# means hash router, the hash router doesn't require HTML5 history API, which is convenient when you can't redirect every request to /index.html when you're building a single-page web app.
What you are looking for is BrowserRouter, which requires using HTML5 history API and requires you to redirect every request to /index.html in order to work, because it's a client router, not from a server.
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Simply add mode: 'history' and you're using BrowserRouter now.
More: https://router.vuejs.org/guide/essentials/history-mode.html
You would actually just want to set mode to history:
const router = new VueRouter({
mode: 'history'
})
make sure your server is configured to handle these links,though:
No. The hash sign is essential for using hash mode (hence why it is in the name). It indicates the start of the fragment identifier (which is used for in-page navigation).
If you didn't use the hash, then you've be using HTML5 history mode and navigating to a different path which would need to be handled by the server.
(As an aside, you might want to look at this answer which covers a similar question from the opposite direction for React).