Скачать или смотреть How to Correctly Include vue-router via CDN for History Mode to Work

Discover how to properly set up Vue-router with CDN to enable history mode and improve your app's routing experience.
---
This video is based on the question https://stackoverflow.com/q/66885656/ asked by the user 'triplepointer' ( https://stackoverflow.com/u/15513919/ ) and on the answer https://stackoverflow.com/a/67016546/ provided by the user 'triplepointer' ( https://stackoverflow.com/u/15513919/ ) 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: How to correctly include vue-router via cdn to make history mode working?

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.
---
Understanding vue-router History Mode

If you're developing a Vue application and using vue-router, you might have stumbled upon the issue of enabling history mode. This feature allows for cleaner URLs without the hash (# ) symbol that usually appears in front of routes. Getting history mode to work properly can be a bit tricky, especially when using a CDN. Let’s delve into how to set it up correctly.

Initial Setup: Including Vue and Vue-Router

To get started, you typically need to include Vue and Vue-Router in your HTML file. Here’s how it usually looks:

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

Once you have these scripts included, you can begin defining your routes in a separate JavaScript file, commonly named main.js. Here's an example of what your routing code might look like:

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

The Problem with History Mode

Now, while you might expect this to work seamlessly, you could encounter a situation where removing mode: 'history' renders your web page correctly, but with the hash-based navigation that we want to avoid. What could be going wrong?

The Need for a Server

The issue arises from the fact that history mode requires a server to handle the routing correctly because when you refresh the page or directly navigate to a route, the server needs to return the same HTML page that includes the Vue app. When run on a local file system or a non-HTTP server, the browser cannot handle this correctly, leading to 404 errors or blank pages.

The Solution: Set Up a Local Development Server

To fix this and enable history mode, a local development server is necessary. You can easily create a simple server using tools like Gulp. Here’s how to do it:

Install Gulp: Ensure you have Node.js installed and then set up Gulp if you haven’t already:

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

Create a Gulp Configuration: In your project directory, create a file named gulpfile.js. Here’s a simple setup that uses gulp-connect to create a server:

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

Run the Server: Open your terminal, navigate to your project folder, and run the Gulp server:

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

Access the Application: Now access your application via http://localhost:8080 (or whatever port it is configured to run on) in your web browser. Your history mode should now work seamlessly!

Conclusion

Implementing vue-router with history mode can greatly enhance your Vue application's routing experience, but it's essential to set up an environment to handle it correctly. By using a local development server such as one created with Gulp, you can ensure that your Vue app can gracefully respond to various URL requests without running into issues.

If you have any more questions or need further assistance, feel free to reach out!