How to remove the hashtag in the url with vue router?

by filiberto , in category: Third Party Scripts , 15 days ago

How to remove the hashtag in the url with vue router?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by deron , 14 days ago

@filiberto 

To remove the hashtag (#) from the URL in Vue Router, you need to use the HTML5 history mode. This mode uses the browser's history.pushState() method to update the URL without causing a full page reload.


To enable HTML5 history mode in Vue Router, you can add the 'mode' option to the router configuration:

1
2
3
4
const router = new VueRouter({
  mode: 'history',
  routes: [...]
});


By setting the 'mode' option to 'history', Vue Router will use the HTML5 history API to manage the URL history without the need for the hashtag.


However, please note that using HTML5 history mode may require server-side configuration to handle URL rewriting for non-root history modes. You may need to configure your server to redirect all requests to your index.html file.


For more information, you can refer to the official Vue Router documentation on HTML5 history mode: https://router.vuejs.org/guide/essentials/history-mode.html