Скачать или смотреть How to Remove # from URLs in Vue Router (Vue.js 2)

Discover how to easily remove `# ` from URLs in Vue Router, tackle common pitfalls, and ensure your routes work seamlessly!
---
This video is based on the question https://stackoverflow.com/q/75435393/ asked by the user 'Harsh Shukla' ( https://stackoverflow.com/u/20663082/ ) and on the answer https://stackoverflow.com/a/75437896/ provided by the user 'Federico Mameli' ( https://stackoverflow.com/u/18665129/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Remove "# " from URL in Vue Router (Vue.js 2)

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Remove # from URLs in Vue Router (Vue.js 2)

When developing applications with Vue.js, you may encounter a common issue: the presence of a hash symbol (# ) in your URLs. For instance, you might see URLs formatted like this domain/main.html# /. While this is perfectly normal for Vue Router's default behavior, you may want a cleaner URL without the hash, such as domain/main.html/. In this guide, we’ll look at how to achieve that with Vue Router and ensure your routes work effectively.

The Problem

You've set up your Vue Router, but even after switching to mode: 'history', your routes may not work as expected. You might be getting errors such as Cannot GET domain/main.html/, or your images and scripts may not load when navigating through your app.

The Solution

Step 1: Change Your HTML File Name

To effectively use the history mode in Vue Router, it’s recommended to change your main HTML file name from main.html to index.html. When using index.html, your application will be served from domain.com/, which is ideal for a clean URL structure.

Step 2: Configure Your Server for Custom HTML File (Optional)

If you would prefer to retain the main.html name, you'll need to configure your server to always respond with main.html for any route. However, it's generally easier and more conventional to rename your HTML file to index.html, which helps prevent further complications down the road.

Important Routing Configuration

To prevent issues with 404 errors and ensure fallback routing works correctly, include the following route configuration in your VueRouter instance:

[[See Video to Reveal this Text or Code Snippet]]

Common Pitfalls to Avoid

Ensure your server is configured to handle requests: If your server does not recognize requests for certain routes, you will continue to face Cannot GET errors. Make sure your server is set up to handle routing properly, particularly if not using index.html.

Check your assets: When switching to history mode, ensure paths to your assets (images, scripts, styles, etc.) are correct. If there is any misalignment, these assets may not load, creating a frustrating user experience.

Conclusion

By renaming your main HTML file to index.html and properly configuring your routes, you can successfully remove the # from your Vue Router URLs. This creates a cleaner, more user-friendly experience and adheres to web standards. Enjoy building your application with the best practices in mind! If you face any additional issues, don’t hesitate to ask for help from the community.